Redux中通过变量键userId向消息列表添加新消息报错排查

嘿，这个问题我太熟了！你遇到的TypeError: state.data[payload.userId] is not iterable是因为当你尝试给一个还不存在于state.data中的用户添加消息时，state.data[payload.userId]会返回undefined——而扩展运算符...只能作用于可迭代对象（比如数组），undefined显然不满足这个要求，所以就抛出了错误。

修复方案一：用ES2020+的空值合并运算符（简洁版） #

我们可以用**空值合并运算符??**确保无论用户是否存在，我们都能拿到一个可迭代的数组：

case types.MESSAGE_FETCHED:
  return { 
    ...state, 
    data: { 
      ...state.data, 
      [payload.userId]: [...(state.data[payload.userId] ?? []), payload.message], 
    }, 
  };

这里state.data[payload.userId] ?? []的意思是：如果state.data[payload.userId]是undefined或者null，就用空数组[]来替代，这样扩展运算符就始终有合法的数组可以操作了。

修复方案二：兼容性更好的条件判断 #

如果你的项目环境还不支持ES2020语法，可以用传统的逻辑或运算符来实现相同效果：

case types.MESSAGE_FETCHED:
  // 先获取已有消息，不存在就用空数组
  const existingMessages = state.data[payload.userId] || [];
  return { 
    ...state, 
    data: { 
      ...state.data, 
      [payload.userId]: [...existingMessages, payload.message], 
    }, 
  };

这两种方式都能完美解决问题，前者代码更简洁，后者兼容性更广，你可以根据项目情况选择。

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