javascript - 警告: flattenChildren(. ..):在reactjs中遇到两个具有相同 key 的子项

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>
            )
        }

尽管我只能在每个选项卡中看到过滤后的项目(因此 key 是唯一的，因为每个项目仅存在一次)，但我仍然收到此警告:

Warning: flattenChildren(...): Encountered two children with the same key, 1. Child keys must be unique; when two children share a key, only the first child will be used.

这是为什么？

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

提前非常感谢! :)

Answer 1

该行的含义是 module.id 不是唯一的，array 中将有 2 个具有相同 的 object id=1，以避免您可以使用对象的索引，它将始终是唯一的。

使用这个:

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 不适合您想要根据条件仅返回几个元素的情况，请使用 forEach为了那个原因。原因是如果您不返回任何内容，默认情况下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);