React遍历对象数组匹配用户ID与帖子外键刷新报undefined错误

• 你触发的getAllPosts、getAllUsers都是异步请求，页面刷新后首次渲染时，请求还未完成，Redux中存储的allUsers初始为空数组/空对象，此时直接访问allUsers[post.user_id].username就会因为前者为undefined抛出类型错误。
• 额外注意：如果你是通过Object.values(state.users)得到的allUsers数组，数组下标是按顺序生成的0、1、2...，和用户id并不一定完全匹配，也可能出现取值错位导致的undefined，这种场景直接用原始的state.users对象通过用户id取值更稳妥：state.users[post.user_id]?.username

1. 用可选链操作符兼容空值
   直接把取值代码替换为：

allUsers[post.user_id]?.username

如果是还不支持可选链的项目，可以用逻辑与兼容：

allUsers[post.user_id] && allUsers[post.user_id].username

空值阶段不会报错，等异步请求返回数据后，页面会自动重渲染显示正确的用户名。

2. 加条件渲染兜底
   可以在渲染用户信息的位置加加载状态兜底，体验更好：

<strong className="homepage-username">
  {allUsers[post.user_id]?.username ?? '用户信息加载中'}
</strong>

3. 外层加加载判断
   在整个列表渲染的外层判断数据是否加载完成，没加载完直接显示加载提示：

{posts.length && allUsers.length ? (
  // 原有的帖子列表渲染逻辑
) : <div>内容加载中...</div>}

本质逻辑和上面的解决方案一致：你加了if (post)的判断，只有当Redux中的post数据加载完成、存在对应值的时候，才会进行后续的属性读取和state赋值，避免了初始空值阶段的报错。

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