无法摆脱“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。” [复制]

Posted 2023-02-22

【中文标题】无法摆脱“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。” [复制]

【英文标题】：Cannot get rid of "Warning: Each child in a list should have a unique "key" prop." [duplicate]

【发布时间】：2020-02-27 16:53:11

【问题描述】：

无法摆脱“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。”

 const Course = () => 

    const list = course.parts.map(parts => <li key=course.parts.id>parts.name parts.exercises</li>)
    const exerscisesOnly = course.parts.map( x => x.exercises)
    var all = 0;

    for(var i = 0; i < exerscisesOnly.length; i++)
        all = all + exerscisesOnly[i]
    



    const Header = (props) => 
      console.log(props)
        return (
            <div>
                <h1>props.course</h1>
            </div>
        )
    

我已经在 course.part.map 中定义了键，但它不想工作

编辑：这被标记为应有的重复，但我仍然对为什么我的 course.parts.id 没有做与 parts.id 相同的事情感到困惑。它至少在我看来链接到同一个地方。

【问题讨论】：

它们都将是undefined（除非您已将id 属性添加到course.parts 数组。但即便如此它们都将是相同的）

你可以使用 id "course.parts.map((parts, index) => "

的索引瞬间

欢迎来到 Stack Overflow！发帖前请search。更多关于搜索here.

@Md.AbuSayed — 不要那样做。 “来自 reactjs.org/docs/lists-and-keys.html#keys：“如果项目的顺序可能发生变化，我们不建议对键使用索引。这会对性能产生负面影响，并可能导致组件状态出现问题。”（来自 T.J. Crowder）

【参考方案1】：

course.parts 是一个数组而不是一个对象，因此您的表达式 course.parts.id 无效。

键帮助 React 识别哪些项目已更改、添加或删除。列表中的每个孩子都应该有一个唯一的“key”

const list = course.parts.map(part => <li key=part.id>part.name part.exercises</li>)

#编辑： 键不应该是索引https://reactjs.org/docs/lists-and-keys.html#keys 它应该是一个唯一的 ID。键是索引存在问题 - 如果数组重新排序或插入了不同的项目，或者从数组中删除了一个单元格。

【讨论】：

为什么投反对票？

这读起来更像是一个找不同的游戏，而不是一个答案。看起来您建议使用 parts.id 作为唯一值，但问题中没有建议 parts.id 甚至存在。

你的回答是对的。 OP 映射到course.parts，但从course.parts 访问id。您应该在回答中澄清这一点

这也可能是一个经常重复的副本。

它不回答这个问题，你可以建议另一个像使用索引作为键