数组或迭代器中的每个子节点都应该具有唯一的密钥propj

Question

嗨，我得到警告“当我通过一组对象映射时，数组或迭代器中的每个子项应该有一个唯一的”键“prop”。

我想做什么？我有一个名为items的对象变量数组，我遍历每个项目以显示其名称。目前这样做我得到了上述警告。它工作但我想摆脱警告。

示例数据名为“items”对象数组。

items = [{
             children: [{meshes:[10,11], name: 'item_1', index:1},
                        {meshes:[1,2], name: 'item_4', inde:4},],
             index: 0,
             default_name: items,}]

下面是代码，

function Items(props) {
return (
    <ul className="items_list">
        <div className="itemss">
            {props.items.map((item) => {
                return (
                    <Item
                        item={item}
                    />
                );
            })}
        </div>
    </ul>
);

}

我试过了什么？我理解，在映射每个项目时，我们应该提供唯一的关键属性。所以我将索引添加到.map方法，如下所示，{props.items.map（（item，index）=> {return（）;}）}

但这不起作用......单击后退按钮它将保持在同一页面。

所以有人可以帮我理解我哪里出错了。或者提供一个答案。谢谢。

Answer 1

您需要从项目中删除索引并将其添加到迭代器中

function Items(props) {
return (
    <ul className="items_list">
        <div className="itemss">
            {props.items.map((item, index) => (
                    <Item
                        key={index}
                        item={item}
                    />
                );
            )}
        </div>
    </ul>
);

Answer 2

只有当列表中的两个或多个项目提供相同的密钥时，才会收到此警告，请尝试此更改。

{props.items.map((item,index) => {
                console.log(index);
                return (
                    <Item
                        key={index}
                        item={item}
                    />
                );
            })}

反模式

你不应该为你使用地图索引Key，它是一个反模式，它可能会导致不可预测的结果。

请检查：https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

您应该为您的密钥使用正确的unique-id，例如DB id或某个unique-id。

此Key在内部用于标识要呈现的DOM元素，而不是再次呈现。