警告：flattenChildren(...)：在 reactjs 中遇到两个具有相同键的孩子

Question

我正在使用 Material UI 中的选项卡，其中显示了一个由选项卡过滤的列表组件，请参阅我的容器组件中选项卡的代码：

              <Tabs
                    className="DrawerTabs"
                    inkBarStyle={{ display: 'none' }}
                >
                    <Tab label="Headline"
                         data-route="/headline"
                         onActive={this.handleActive}
                         className={this.isActive('Headline')}
                    >
                        <div>
                            <ModulesListContainer
                                filter="Headline"
                            />

                        </div>
                    </Tab>
                    <Tab label="Body"
                         data-route="/body"
                         onActive={this.handleActive}
                         className={this.isActive('Body')}
                    >
                        <div>
                            <ModulesListContainer
                                filter="Body"
                            />
                        </div>
                    </Tab>
                    <Tab
                        label="Other"
                        data-route="/other"
                        onActive={this.handleActive}
                        className={this.isActive('Other')}
                    >
                        <div>
                            <ModulesListContainer
                                filter="Other"
                            />
                        </div>
                    </Tab>
                </Tabs>

以及我放置在每个选项卡中的 ModuleList 的代码，它仅显示基于从容器组件传递的过滤器的项目：

        const ModulesList = (props) => {

            let ListItems = props.modulesProps.map(module => {

                if (props.filter === module.category) {
                    return (
                        <ListItem
                            key={module.id}
                            className="ModulePreview"
                        >
                            {module.id} - {module.name} - {module.thumbnail}
                            <FontAwesome
                                name="plus-circle"
                                size="2x"
                                onClick={props.addModule.bind(this, module)}
                                className="AddModule"
                            />
                        </ListItem>
                    )
                }
            })

            return (
                <div className="ModulesList">
                    <List>
                        {ListItems}
                    </List>
                </div>
            )
        }

即使我只能在每个选项卡中看到过滤后的项目（因此键是唯一的，因为每个项目只存在一次）我仍然收到此警告：

警告：flattenChildren(...): 遇到两个相同的孩子 键，1。子键必须是唯一的；当两个孩子共用一把钥匙时， 只会使用第一个孩子。

为什么会这样？

任何帮助/想法/提示将不胜感激。

提前非常感谢！ :)

Answer 1

该行的意思是module.id不是唯一的，array中会有2个objects具有相同的id=1，避免你可以使用object的索引，它总是独一无二。

使用这个：

let ListItemsUI = [];
props.modulesProps.forEach((module, i) => {
    if (props.filter === module.category) {
        ListItemsUI.push (
            <ListItem
                key={i}
                className="ModulePreview"
            >
                {module.id} - {module.name} - {module.thumbnail}
                <FontAwesome
                    name="plus-circle"
                    size="2x"
                    onClick={props.addModule.bind(this, module)}
                    className="AddModule"
                />
            </ListItem>
        )
    }
})

return (
     <div className="ModulesList">
          <List>
              {ListItemsUI}
          </List>
     </div>
)

还有一点map 不适合这些情况，您希望return 仅基于条件的几个元素，请使用forEach。原因是如果你不return 任何东西，默认情况下map 将返回undefined。

检查此示例的输出：

let a = [1,2,3,4,5,6,7,8];

let b = a.map(el=>{
    if(el % 2 == 0)
       return el;
})

console.log(b);