Question

我正在使用素材用户界面中的标签显示按标签过滤的列表组件，请参阅我的容器组件中标签的代码：

              <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不是唯一的，objects中{2} array的{{1}}具有相同的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);

警告：flattenChildren（...）：在reactjs

1 个答案: