React获取对象内数组数据报错：TypeError: Cannot read properties of undefined

错误原因 #

你碰到的TypeError: Cannot read properties of undefined (reading '0')，核心问题是组件首次渲染时数据还没加载完成，且初始状态设置错误：

• 你把data的初始状态设成了空数组[]，但API返回的是包含infos和photo字段的对象，不是数组。
• 组件第一次渲染时，data还是空数组，data.infos自然是undefined，此时尝试访问data.infos[0]就会触发错误。

修复步骤 #

1. 修正初始状态
   把useState([])改成useState({})，让初始的data是一个空对象，和API返回的数据结构匹配：

const [data, setData] = useState({})

2. 安全访问数据
   用可选链操作符?.来避免访问不存在的属性报错，修改渲染部分：

<h1>{data.infos?.[0]?.name}</h1>

如果想在数据未加载时显示提示，还可以加个默认值：data.infos?.[0]?.name || '加载中...'

3. 优化异步代码（可选）
   你现在的getdata函数同时混用了async/await和.then，可以统一风格让代码更清晰：

const getdata = async () => {
  try {
    const response = await getbyid(state);
    setData(response.data);
    console.log(response.data);
  } catch (e) {
    console.log(e);
  }
};

另外，useEffect里的console.log(getdata())会打印Promise { <pending> }，因为async函数返回的是Promise，直接删掉就行。

额外优化（可选） #

如果想在数据加载完成前显示加载状态，可添加条件渲染：

return (
  <div>
    {data.infos?.length ? (
      <h1>{data.infos[0].name}</h1>
    ) : (
      <p>加载中...</p>
    )}
  </div>
)

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