在渲染对象数组时，不断获取“警告：列表中的每个子级都应具有唯一的“键”属性。”

Question

我有一个包含数组的对象。我能够使它呈现我想要的方式。然而，反应键给我带来了麻烦；抛出这个“警告：列表中的每个孩子都应该有一个独特的“钥匙”道具。”

我曾尝试在原始数组对象中为每个数组中的每个元素指定一个唯一的“id”属性，但没有帮助。

我也看了这些，但我想我有所有的建议：数组或迭代器中的每个孩子都应该在reactjs中有一个唯一的“键”道具警告：列表中的每个孩子都应该有一个唯一的“键”道具警告：一个数组或迭代器中的每个孩子数组或迭代器应该有一个唯一的“键”道具。检查ListView的渲染方法

我的对象

const courses = 
[
    {
      name: 'Half Stack application development',
      id: 'Half Stack application development',
      parts: [
        {
          name: 'Fundamentals of React',
          exercises: 10,
          id: 'Fundamentals of React'
        },
        {
          name: 'Using props to pass data',
          exercises: 7,
          id: 'Using props to pass data'
        },
        {
          name: 'State of a component',
          exercises: 14,
          id: 'State of a component'
        },
        {
          name: 'Redux',
          exercises: 11,
          id: 'Redux'
        }
      ]
    }, 
    {
      name: 'Node.js',
      id: 'Node.js',
      parts: [
        {
          name: 'Routing',
          exercises: 3,
          id: 'Routing'
        },
        {
          name: 'Middlewares',
          exercises: 7,
          id: 'Middlewares'
        }
        ]
    }
]


ReactDOM.render(<App course={courses}/>, document.getElementById('root'));

这是回调顺序：

应用程序-

const App = ({course}) => {
  return (
    <>
      <Courses course={course} />
    </>
  )
}

const Courses = ({course}) => {
    console.log("Starting.....")
    const courseList = course.map(nameConent => nameConent)
    // console.log(courseList)
    // const idList = courseList.map(eachCourse =>eachCourse.id)
    const mapEverything = () => courseList.map(a => <Course name={a.name} partsList={a.parts} id={a.id}/>)
    // const mapEverything = () => courseList.map(a => console.log(a.id))
    // console.log("CourseID",idList)
    return (
        <>  
            {mapEverything()}
        </>

    )
}

const Course = ({name,partsList,id}) => {
    // console.log(name)
    console.log("CourseID", id)

    return (
        <>
            <div key={id}>
                <Header header={name} id={id}/>
                <Content contents={partsList} id={id+"======"}/>
            </div>
        </>
    )
}

const Content = ({contents,id}) => {
    console.log("contentsID",id)
    const partList = () => contents.map(part =>
        <Part
            name={part.name}
            id={part.id} 
            exercises={part.exercises}
        />
    )

    const getSumofArray = (accumulator, currentValue) => accumulator + currentValue

    const exeList = contents.map(content => content.exercises).reduce(getSumofArray)
    // console.log(exeList)
    return (
        <>
            <ul key={id}>
                {partList()}
            </ul>
            <b>total exercises: {exeList}</b>
        </>
    )
}

const Header = ({header, id}) => {
    console.log("HeaderID", id)
    return (
        <>
            <h1 key={id}>
                {header}
            </h1>
        </>
    )
}

const Part = ({name, id, exercises}) => {
    console.log("PartID", id)
    return (
        <>
            <li  key={id}>
                {name}: {exercises}
            </li>
        </>
    )
}

它在课程和内容方面遇到了问题。

警告截图：https://drive.google.com/open?id=1kcLlF0d90BG6LXPojDtfSlBFGafC9HC_

Answer 1

这是关键道具的主题。无论何时在Reactjs中呈现数组或列表，它都希望有一个键属性可用。

此键属性的存在是出于性能考虑，它使Reactjs更容易呈现项目列表。

您所要做的就是为数组中的任何其他元素提供另一个道具。您的课程列表中最独特的标识符似乎是名称。因此，您可能需要将代码简化为这样的内容，以使自己能够运行：

const CourseList = () => {
  const RenderedCourses = courses.map(function(course) {
    return <CourseDetail key={course.name} course={course} />;
  });
  return <ul>{RenderedCourses}</ul>;
};

然后，一旦你开始工作，你可以使代码简洁，你是如何用箭头函数和所有：

const CourseList = () => {
  const RenderedCourses = courses.map(course => (
    <CourseDetail key={course.name} course={course} />
  ));
  return <ul>{RenderedCourses}</ul>;
};

Answer 2

我认为问题在于：

const mapEverything = () => courseList.map(a => <Course name={a.name} partsList={a.parts} id={a.id}/>)

您应该尝试在此处添加密钥：

const mapEverything = () => courseList.map(a => <Course name={a.name} partsList={a.parts} id={a.id} key={a.id}/>)

这里也是：

const partList = () => contents.map(part =>
        <Part
            name={part.name}
            id={part.id} 
            exercises={part.exercises}
            key={part.id}
        />)

下面是一个很好的解释，说明了为什么需要这样做。