React+TypeScript访问employees数组属性报Cannot read properties of undefined错误

错误原因梳理 #

1. 异步请求初始值问题
   你给employees的state初始值是空数组[]，fetch请求是异步执行的，组件首次渲染时请求还未返回，此时直接访问employees[0]得到的是undefined，读取它的属性自然会抛出TypeError: Cannot read properties of undefined错误。
2. 语法错误

• employees[0]."first_name"：JavaScript 点语法不支持直接跟带引号的字符串，属于非法语法
• employees[0][first_name]：方括号内如果写的是属性名字符串必须加引号，不加的话 TypeScript 会将first_name识别为变量，你没有定义这个变量自然会抛出Cannot find name 'first_name'错误
• 剩下两种写法本身语法是合法的，报错同样是因为初始状态employees[0]为undefined导致的。

正确解决方案 #

步骤1：补充TypeScript类型定义

不要用any定义state，先声明员工数据的类型，获得完整的类型提示：

// 定义单个员工的字段类型
type Employee = {
  first_name: string;
  last_name: string;
  // 后续有其他字段也可以在此补充
}
// 修改state的类型定义
const [employees, setEmployees] = useState<Employee[]>([]);

步骤2：用可选链做空值防护

访问属性时加?.可选链运算符，当访问的对象为undefined时会直接返回undefined，不会抛出错误，两种合法写法：

// 点语法
employees[0]?.first_name
// 方括号语法
employees[0]?.["first_name"]

步骤3：渲染列表建议用map遍历

如果要渲染全部员工列表，不要写死访问索引，直接遍历数组更安全，初始空数组状态下不会渲染任何内容，数据返回后自动更新：

return (
  <ul>
    {employees.map((emp, idx) => (
      <li key={idx}>{emp.first_name} {emp.last_name}</li>
    ))}
  </ul>
)

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