React+Node实时聊天报msg.map is not a function错误如何解决

问题根因 #

报错Uncaught TypeError: msg.map is not a function的核心原因是你更新msg状态时的语法错误，直接把数组展开传给setMsg，导致原本是数组类型的msg被覆盖为单个非数组值，自然不存在map方法。

具体错误位置&修复方案 #

1. socket消息监听回调的setMsg写法错误
   你原来的写法是直接展开msg传参：

setMsg(...msg, messageS)

setState只会接收第一个参数作为新的状态值，这种写法相当于把msg数组的第一项设为新的msg，类型直接从数组变为对象。
修复方法：把展开的旧数组和新消息包裹在同一个新数组里，同时使用函数式更新避免闭包陷阱：

socket.on("message", messageS => {
  if(messageS.sender !== localStorage.getItem('user')) {
    setMsg(prevMsg => [...prevMsg, messageS])
  }
})

2. sendMSG方法里的setMsg写法错误
   和上面的问题完全一致，原写法：

setMsg(...msg, {name:v.group.name, sender:localStorage.getItem('user'), text:message})

修复为：

setMsg(prevMsg => [...prevMsg, {name:v.group.name, sender:localStorage.getItem('user'), text:message}])

额外问题排查点 #

• 可以在请求历史消息的回调里加数组类型校验，避免后端返回非数组值导致的异常：

axios.get(`http://localhost:5050/chat/getmsg/${v.group.name}`)
  .then(group => {    
    setMsg(Array.isArray(group.data) ? group.data : [])
  })

• 注意你代码里获取分组的localStorage key写的是gruop，属于拼写错误，建议检查改为group，避免加房间失败的问题。

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