MERN stack应用读取state属性报错但渲染正常该如何解决？

报错根因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'creatureId')报错本质是异步操作未完成时提前访问了空的player数组首项，最终异步执行完成后player拿到了有效值，所以页面能正常渲染，但前面几次执行触发的报错会保留在控制台，具体触发原因有3个：

• 你把player和userfrontId都加进了useEffect的依赖数组，每次两个state更新都会触发整个useEffect重新执行，导致异步逻辑重复调用，刚好对应你看到的6次报错
• 同个useEffect里的3个异步函数是并行执行的，loadAsyncDataUser还没跑完把有效用户数据写到player state里，后面两个读取player[0].creatureId的函数就已经执行了
• 用filter获取用户数据时，如果当前用户还没入库，filter返回的是空数组，此时player[0]就是undefined，访问creatureId直接触发类型错误

具体修复方案 #

1. 拆分useEffect，隔离不同逻辑的依赖 #

把原来混在一起的useEffect拆成3个独立的，避免不必要的重复触发，同时确保只有前置依赖有有效值时才执行后续逻辑：

第一个useEffect：仅页面初始化时加载用户数据

useEffect(() => {
  const loadAsyncDataUser = async () => {
    try {
      // 未拿到用户授权信息时不执行
      if (!Userfront.user?.userId) return;
      const { data } = await getUsers();
      const currentUserfrontId = Userfront.user.userId;
      setUserfrontId(currentUserfrontId);
      let userData = data.filter(user => user.userfrontId === currentUserfrontId);
      // 当前用户不存在则新建
      if (userData.length === 0) {
        const newUser = {
          userfrontId: currentUserfrontId,
          name: Userfront.user.name,
          avatarPath: null,
          experience: 0,
          creatureId: null,
        }
        // 拿到新建用户的返回值直接写入userData，避免重新拉取
        const { data: addedUser } = await addUser(newUser);
        userData = [addedUser];
      }
      setPlayer(userData);
    } catch (error) {
      console.log(error);
    }
  }
  loadAsyncDataUser();
}, []);

第二个useEffect：仅player更新后加载对应生物数据

useEffect(() => {
  // 边界判断：player为空、首项不存在、creatureId为空都不执行
  if (!player.length || !player[0]?.creatureId) return;
  const loadAsyncDataPlayer = async () => {
    try {
      const { data } = await getCreatures();
      const playerCreatureData = data.filter(creature => creature._id === player[0].creatureId);
      setPlayerCreature(playerCreatureData);
    } catch (error) {
      console.log(error);
    }
  }
  loadAsyncDataPlayer();
}, [player]);

第三个useEffect：仅player更新后给新用户分配随机生物

useEffect(() => {
  // 边界判断：player为空、用户已有creatureId都不执行
  if (!player.length || player[0]?.creatureId !== null) return;
  const checkAsyncDataCreature = async () => {
    try {
      const { data } = await getCreatures();
      const randomCreatureId = data[Math.floor(Math.random() * data.length)]._id;
      await updateUser(player[0]._id, { creatureId: randomCreatureId });
      // 直接更新player的creatureId，触发上一个useEffect加载生物详情
      setPlayer(prev => [{...prev[0], creatureId: randomCreatureId}]);
    } catch (error) {
      console.log(error);
    }
  }
  checkAsyncDataCreature();
}, [player]);

2. 全局替换访问逻辑，加可选链兜底 #

把代码中所有player[0].creatureId替换为player[0]?.creatureId，避免边界情况触发报错。

3. （可选）优化player数据结构 #

你当前只需要存储单个玩家数据，没必要用数组存储，直接用对象可以避免下标访问的问题：

// 初始值设为null
const [player, setPlayer] = useState(null);
// 后续访问属性直接用player?.creatureId即可

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