React更新chatList报TypeError: chatList.map不是函数的问题求解

报错原因 #

TypeError: chatList.map is not a function的错误和你返回全量聊天列表无关，是你setChatList的调用写法错误：
你当前的写法是setChatList(...chatList, res.data)，相当于把chatList数组的每一项作为独立参数传给setChatList，最终chatList会被赋值为数组的第一个元素（非数组类型），自然没有map方法。

你提到的useEffect问题 #

依赖项为空数组的useEffect本身就只会在组件首次渲染完成后执行一次，用户点击按钮时不会重复触发，你之前的定位有误，问题核心在setChatList的赋值逻辑。

修复方案 #

1. 修正setChatList赋值逻辑 #

因为你的/chat/rooms和/chat/add接口返回的都是完整的新旧聊天全量数据，直接把接口返回的数组赋值给chatList即可，不需要展开合并：

// getChats和newChat方法里的setChatList都改成下面的写法
setChatList(res.data)

如果你后续需要做增量合并（接口只返回新聊天），可以用函数式更新写法避免闭包问题：

setChatList(prevList => [...prevList, ...newChats])

2. 冗余逻辑清理 #

• 单独存储的lengthChats状态完全冗余，可以直接用chatList.length判断，不需要额外维护，减少状态同步问题
• window.addEventListener("load", getMessagesnumber)要放在空依赖的useEffect中，并且补充清理函数，避免重复绑定监听和内存泄漏：

useEffect(() => {
  const getMessagesnumber = () => {
    const zuffalszahl = Math.floor(Math.random() * 5);
    setMessagesnumber(zuffalszahl);
  };
  window.addEventListener("load", getMessagesnumber);
  // 组件卸载时清理监听
  return () => window.removeEventListener("load", getMessagesnumber);
}, [])

• JSX里的class属性要改成className，符合React语法规范。

3. 边界情况优化 #

接口返回数据前可以加类型判断，避免后端返回非数组类型导致报错：

if(Array.isArray(res.data) && res.data.length >= 1) {
  // 后续赋值逻辑
}

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