使用useState声明的默认对象数组在表格渲染时出现读取未定义属性错误

可能的原因 #

你的初始users数组结构正常，但报错说明渲染时map遍历到了undefined元素，或是users本身被意外改为非数组值（比如undefined/null）。常见触发场景：

• 后续调用setUsers时传入了非数组数据（比如接口返回异常、数据处理逻辑出错）
• 数组中被意外插入了undefined项

快速修复方案 #

1. 添加空值保护（可选链操作） #

在访问对象属性和调用map前加可选链，避免因值未定义导致报错：

<tbody>
  {users?.map((obj, index) => (
    <tr key={obj.prn}> {/* 推荐用唯一标识prn作为key，比index更稳定 */}
      <td>{obj?.prn}</td>
      <td>{obj?.name}</td>
      <td>{obj?.gender}</td>
    </tr>
  ))}
</tbody>

2. 强制保证users始终为数组 #

在所有修改users的操作中（比如接口请求、状态更新），确保传入setUsers的是数组类型：

// 示例：接口请求后处理数据
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => {
      // 即使接口返回空或非数组，也转为空数组
      setUsers(Array.isArray(data) ? data : []);
    })
    .catch(() => {
      setUsers([]); // 请求失败时重置为数组
    });
}, []);

3. 过滤数组中的无效项 #

如果数组中可能存在undefined元素，遍历前先过滤：

<tbody>
  {users.filter(obj => obj).map((obj, index) => (
    <tr key={obj.prn}>
      <td>{obj.prn}</td>
      <td>{obj.name}</td>
      <td>{obj.gender}</td>
    </tr>
  ))}
</tbody>

关键注意点 #

• 尽量避免用数组index作为key，优先使用每个对象的唯一标识（比如prn），防止组件重渲染时出现异常
• 检查所有setUsers的调用，确保不会将users设置为非数组类型

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