如何在React JS中正确渲染数组的每一项？新手开发异常问题求助

问题根因 #

你在Content组件的map遍历逻辑里错误引用了属性：

• props.course.parts是数组本身，不存在name属性
• map回调的入参part才是数组遍历到的单个元素，你需要从part上取name属性

修正后完整代码 #

import React from 'react'

const App = () => {
  const course = {
    name: 'Half Stack application development',
    parts: [
      {
        name: 'Fundamentals of React',
        exercises: 10
      },
      {
        name: 'Using props to pass data',
        exercises: 7
      },
      {
        name: 'State of a component',
        exercises: 14
      }
    ]
  }
  const Header = (props) => {
    return (
      <h1>{props.course.name}</h1>
    )
  }
  
  const Content = (props) => {
    // 这里用map遍历得到的单个part变量取属性，同时给li加唯一key属性避免React警告
    const lisItem = props.course.parts.map(part =>
      <li key={part.name}>{part.name}</li>
    )
    return (
      <ul>{lisItem}</ul>
    )
  }

  return (
    <div>
      <Header course={course}/>
      <Content course={course}/>
    </div>
  )
}

export default App

额外优化建议 #

• 列表渲染必须给每一项添加唯一的key属性，有助于React做虚拟DOM的Diff计算，提升渲染性能
• 组件可以提取到App组件外部定义，避免每次App重渲染的时候重复创建组件实例

内容的提问来源于stack exchange，提问作者trang nguyen