时间戳

首页 > 解决方案 > 如何有效地映射嵌套对象？

javascript - 如何有效地映射嵌套对象？

问题描述

我有一个看起来像这样的嵌套对象：

const notes = {
    infantry: {
        mainHand: {
            '3OayPUASk1JJFJwpKW7u': {
                id: '3OayPUASk1JJFJwpKW7u',
                note: 'Champion blade is overall less powerful ... ',
            },
            '5N3y7DfjZwFTPxoyg3La': {
                id: '5N3y7DfjZwFTPxoyg3La',
                note: 'Ghastly Cane has really good stats, ...',
            },
            '7mOdjVqp9co87Ymkvk9F': {
                id: '7mOdjVqp9co87Ymkvk9F',
                note: 'Terror Lash is a decent piece, but...',
            },
        },
        offHand: {
            G6qQaEqzWcMytMI3W7re: {
                id: 'G6qQaEqzWcMytMI3W7re',
                note: 'Ranged ATK Jewel',
            },
        },
    },
    ranged: {
        '7mOdjVqp9co87gmkvk9F': {
            id: '7mOdjVqp9co87gmkvk9F',
            note: 'Frostwing sword makes a great starter piece for Inf set..',
        },
    },
};

我使用这样的注释组件（访问步兵道具）：

 
function Notes(props) {
    return (
        <div>
            {Object.values(notes.infantry[props.type]).map((item) => (
                <div key={item.id}>
                    <h5>{item.note}</h5>
                </div>
            ))}
        </div>
    );
}

我这样称呼组件：

  <Notes type={'mainHand'} />

这里的问题是，我不知道如何重用组件来动态更改infantry为ranged.

我试图将其更改为：

  {Object.values(notes[props.type]).map((item) => (
                    <div className='p-3 col-sm' key={item.id}>
                        <h5>{item.note}</h5>
                    </div>

并通过 <Notes type={'[infantry[mainHand]]'} />，但它不工作。

我可以解决这个问题的唯一方法是为每个notes属性（步兵、远程等）制作一个 Notes 组件

标签： javascriptreactjs

解决方案

最好使用表示/容器组件模式并使您的 Notes 组件尽可能简单。将数据检索逻辑提取到某个上游容器。例如：

function Notes({ items }) {
    return (
        <div>
            {items.map(({ id, note }) => (
                <div key={id}>
                    <h5>{note}</h5>
                </div>
            ))}
        </div>
    );
}

并按如下方式使用它：

<Notes items={Object.values(notes.infantry.mainHand)} />

或者，如果您想将笔记数据封装在Notes组件内，您可以按如下方式传递选择器函数：

function Notes({ selector }) {
    return (
        <div>
            {selector(notes).map(({ id, note }) => (
                <div key={id}>
                    <h5>{note}</h5>
                </div>
            ))}
        </div>
    );
}

...

<Notes selector={notes => Object.values(notes.infantry.mainHand)} />

推荐阅读