当每个键已经是唯一的时，列表中的每个孩子都应该有一个唯一的“键”警告答案

【问题标题】：Each child in a list should have a unique "key" warning when every key is already unique当每个键已经是唯一的时，列表中的每个孩子都应该有一个唯一的“键”警告
【发布时间】：2020-05-07 01:59:30
【问题描述】：

有人能告诉我为什么即使在我为每个元素都创建了唯一键之后我还是得到Each child in a list should have a unique "key" prop 吗？

我可以通过keys[index].tag-name 从keys 对象数组中访问每个键，并验证它是唯一的。

return (
    Object.entries(props.values).map(([key, value], index) => (
        <div>
            <span key={keys[index].span} />
            <p key={keys[index].p} />
        </div>
    ))
);

// key format "c98301e0-f2bd-4442-a829-407e6beecf0d"

【问题讨论】：

您不需要 span 和 p 上的密钥，只需要父 div 。另外，我相信在这种情况下只有keys[index]should suffice

标签： javascript reactjs

【解决方案1】：

您必须将 key 属性添加到父元素。在你的情况下，这是一个div。

return (
    Object.entries(props.values).map(([key, value], index) => (
        <div key={keys[index].span} >
            <span/>
            <p key={keys[index].p} />
        </div>
    ))
);

【讨论】：

【解决方案2】：

您必须将密钥添加到要返回的父级，此处为div

return (
    Object.entries(props.values).map(([key, value], index) => (
        <div key={keys[index].div}>
            <span />
            <p />
        </div>
    ))
);

【讨论】：

是的，当然，我没想到，谢谢！

【解决方案3】：

尝试把key放到div里面，或许可以解决你的问题

return (
    Object.entries(props.values).map(([key, value], index) => (
        <div key={keys[index].span}>
            <span  />
            <p  />
        </div>
    ))
);

【讨论】：