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

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

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

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 个 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 将 return 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);

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

Warning: flattenChildren(...): Encountered two children with the same key in reactjs

javascript

reactjs

material-ui