登录后出现Uncaught TypeError，刷新后消失的问题排查

问题描述 #

登录后页面显示空白，控制台抛出错误：ChatLogics.js:2 Uncaught TypeError: Cannot read properties of undefined (reading '_id')，但刷新页面后错误消失。需确定是users[0]._id还是loggedUser._id导致问题，并明确背后原因。

原因定位 #

核心问题：loggedUser初始未定义，渲染时提前触发函数调用 #

在MyChats.jsx中：

• loggedUser通过useState()初始化，初始值为undefined
• useEffect中会从localStorage读取用户信息并设置loggedUser，同时调用异步方法fetchChats获取聊天列表
• 组件首次渲染时，chats可能已从Context中获取到数据（或fetchChats快速返回结果），此时loggedUser还未被useEffect赋值，仍为undefined
• 调用getSender(loggedUser, chat.users)时，loggedUser._id就会触发“读取undefined的_id”错误

刷新后正常的原因 #

刷新页面时，localStorage中已存储userInfo，useEffect执行时会同步将loggedUser设置为解析后的用户对象，此时渲染chats列表时loggedUser已有有效值，不会触发错误。

确定错误来源 #

问题出在loggedUser._id未定义。若为users[0]._id未定义，刷新后同样会报错，因此可排除users数据异常的可能。

解决方案 #

方案1：渲染时增加条件判断，避免空值调用 #

修改MyChats.jsx中聊天名称的渲染代码：

<Text>
  {!chat.isGroupChat 
    ? (loggedUser ? getSender(loggedUser, chat.users) : '')
    : chat.chatName}
</Text>

方案2：初始化时预加载用户信息，给工具函数加防御性检查 #

1. 初始化loggedUser时直接读取localStorage：

const [loggedUser, setLoggedUser] = useState(JSON.parse(localStorage.getItem('userInfo')) || null);

2. 在ChatLogics.jsx的getSender函数中增加空值校验：

export const getSender = (loggedUser, users) => {
  if (!loggedUser || !users?.length) return '';
  return users[0]._id === loggedUser._id ? users[1].name : users[0].name;
};

方案3：调整useEffect执行顺序，确保用户信息就绪后再拉取聊天列表 #

修改useEffect逻辑，等待用户信息设置完成后再调用fetchChats：

useEffect(() => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'));
  setLoggedUser(userInfo);
  // 确保用户信息存在再获取聊天数据
  if (userInfo) {
    fetchChats();
  }
}, [fetchAgain]);

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