React中访问数组对象属性返回undefined？求解决办法

你犯了两个关键错误：

• employees是数组类型，不是单个对象，直接访问employees.fullName必然返回undefined——数组本身没有fullName属性，你需要访问数组内的具体元素（比如通过索引）或者遍历数组获取每个对象的属性。
• JSX中的<h1/>标签闭合错误，正确的闭合方式是</h1>，错误的闭合会导致页面渲染异常。

解决方式1：显示单个员工的信息 #

如果只需要展示某一个员工的全名，通过数组索引访问对应对象即可：

import React from 'react'

function App(){

  const [employees, setemployees] = React.useState([{
    id: 1,
    fullName: "Bob Jones",
    designation: "JavaScript Developer",
    gender: "male",
    teamName: "TeamA"
  },
  {
    id: 2,
    fullName: "Jill Bailey",
    designation: "Node Developer",
    gender: "female",
    teamName: "TeamA"
  },
  {
    id: 3,
    fullName: "Gail Shepherd",
    designation: "Java Developer",
    gender: "female",
    teamName: "TeamA"
  }]);

// 打印第一个员工的全名
console.log(employees[0].fullName)
  return( 
    <main>
        <h1>{employees[0].fullName}</h1>
    </main>
  )
}

export default App

解决方式2：遍历显示所有员工信息 #

如果要展示全部员工的名字，使用map方法遍历数组（注意给每个列表项添加唯一key属性）：

import React from 'react'

function App(){

  const [employees, setemployees] = React.useState([{
    id: 1,
    fullName: "Bob Jones",
    designation: "JavaScript Developer",
    gender: "male",
    teamName: "TeamA"
  },
  {
    id: 2,
    fullName: "Jill Bailey",
    designation: "Node Developer",
    gender: "female",
    teamName: "TeamA"
  },
  {
    id: 3,
    fullName: "Gail Shepherd",
    designation: "Java Developer",
    gender: "female",
    teamName: "TeamA"
  }]);

// 遍历打印所有员工的全名
employees.forEach(emp => console.log(emp.fullName))
  return( 
    <main>
        <h1>员工列表</h1>
        <ul>
            {employees.map(emp => (
                <li key={emp.id}>{emp.fullName}</li>
            ))}
        </ul>
    </main>
  )
}

export default App

内容的提问来源于stack exchange，提问作者Maaz Maavia