编辑：

Question

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

 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}一样。在我看来，它至少链接到同一个地方。

Answer 1

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

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

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

编辑：

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

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

1 个答案:

编辑：