React页面渲染数据正常，刷新时报Cannot read properties of undefined错误

刷新页面时，组件初始化的user状态是空数组[]，此时API请求尚未完成，user[0]为undefined，直接访问user[0].name就会触发Cannot read properties of undefined (reading 'name')的错误。首次渲染正常大概率是因为浏览器缓存了之前的API响应，数据在组件渲染前就已加载完成，但刷新时缓存失效，API请求存在延迟，导致渲染时数据未就绪。

另外你的fetch代码存在一个隐藏问题：fetch返回的是Response对象，不能直接访问data.data，需要先调用res.json()解析响应体，否则无法正确获取后端返回的数据。

1. 使用可选链操作符（最简洁） #

在访问嵌套属性前添加?.，当user[0]为undefined时，表达式会直接返回undefined，不会抛出错误：

return(
  <div>
    <div>{user[0]?.name}</div>
    <div>{user[0]?.age}</div>
    <div>{user[0]?.years}</div>
  </div>
)

2. 条件渲染 #

先判断数据是否就绪，再渲染对应的内容，还能给用户展示加载状态：

return(
  <div>
    {user[0] ? (
      <>
        <div>{user[0].name}</div>
        <div>{user[0].age}</div>
        <div>{user[0].years}</div>
      </>
    ) : (
      <div>加载中...</div>
    )}
  </div>
)

3. 修复fetch请求逻辑 #

补充响应体解析步骤，同时添加错误捕获避免请求失败时无提示：

useEffect(()=>{
  fetch('api/dashboard/userDetails')
    .then(res => res.json()) // 解析JSON格式的响应体
    .then(responseData => setUser(responseData.data?.data))
    .catch(err => console.error('用户数据请求失败:', err))
},[])

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