Question

嗨，我在通过对象数组进行映射时收到警告“数组或迭代器中的每个子代都应具有唯一的“键”道具。”

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

对名为“ 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）=> { 返回（）; }）}

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

所以有人可以帮助我了解我要去哪里。或提供答案。谢谢。

Answer 1

仅当列表中的两个或多个项目具有相同的键时，您才会收到此警告，请尝试进行此更改。

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

反模式

您不应该使用地图的索引作为密钥，因为它是反模式，可能会导致不可预测的结果。

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

您应该为密钥使用正确的唯一ID ，例如数据库ID或某些唯一ID。

此键在内部用于标识 DOM元素，以进行渲染，而不是再次进行渲染。

Answer 2

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

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

数组或迭代器中的每个子代都应具有唯一的键道具reactjs

2 个答案: