React中直接取数组元素刷新失效，用map渲染却正常？原因何在？

核心问题出在初始渲染阶段的空数组访问逻辑以及两种渲染方式的错误处理差异：

1. 初始状态与渲染时机的冲突

   • Redux中posts的初始值是空数组，页面刷新后组件会优先执行首次渲染，此时posts仍为空。直接访问posts[0].category等同于访问undefined.category，会触发JavaScript语法错误，导致组件渲染失败甚至崩溃。后续即使接口请求完成、posts更新为包含数据的数组，组件也会因为之前的错误无法触发重新渲染。
   • 而使用map遍历时，空数组调用map会直接返回空结果，不会执行任何子组件渲染逻辑，自然不会触发访问undefined属性的错误。等接口请求完成、posts有数据后，map会正常遍历并渲染组件，因此表现正常。

2. 未利用loading状态做渲染控制

   • 你的代码已经从Redux获取了loading状态，但直接渲染时没有根据loading判断是否渲染内容。刷新时loading为true，此时应该显示加载状态而非直接访问posts元素；而map的方式天然规避了这个问题——空数组不会渲染内容，间接实现了“加载时不渲染”的效果。

解决建议 #

直接渲染时加上loading判断和空数组校验：

{!loading && posts.length > 0 ? (
  <>
    <h4>cat: {posts[0].category}</h4>
    <h4>aut: {posts[0].username}</h4>
  </>
) : (
  <div>加载中...</div>
)}

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