Javascript 反应+；useState+；数组+；变异=错误

在函数writeMessage中，我需要用传入的新消息填充名为chat的数组。为了做到这一点，我尝试了三种没有运气的选择。没有突变，它们只接受初始状态并放弃其他变化。随着变异，它不会重新呈现自己。任何帮助都将不胜感激

常量writeMessage=（msg）=>{ //newChat=chat.concat（msg）； //newChat=[…chat，msg]；这两个函数采用初始状态，但不适用于修改后的状态 //setChat（newChat）； chat.push（msg）；//这会发生变化：（并且可以工作，但不会重新呈现自身 }

我的代码：

import React，{useffect，useState}来自“React”；
从“socket.io客户端”导入openSocket；
导入“/App.css”；
常量应用=（）=>{
var socket=openSocket（'http://localhost:3001/')
var newChat=[]；
const[message，setMessage]=useState（“”）；
const[chat，setChat]=useState（[{msg:“Hola”}，{msg:“Todo Bien？”}）
useffect（（）=>{
socket.on（'newmessage'，函数（msg）{
写消息（msg）
});
},[])
常量writeMessage=（msg）=>{
//newChat=chat.concat（msg）；
//newChat=[…chat，msg]；这两个函数采用初始状态，但不适用于修改后的状态
//setChat（newChat）；
chat.push（msg）；//这会发生变化：（并且可以工作，但不会重新呈现自身
}
const sendMessage=（）=>{
如果（消息==“”）{
警惕（“请写点东西”）；
}否则{
发出（'send message'，message'）；
设置消息（“”）；
}
console.log（聊天）；
}
返回(
{chat.map（（msg，index）=>
{msg.msg}
）}
setMessage（e.target.value）}/>
发送
)
}
导出默认应用程序

---

使用useState时，可以使用

prevState

和spread操作符创建如下新数组

const writeMessage = (msg) => {
  setChat((prevState) => [...prevState, msg]);
}

---

使用此方法，您不会改变状态，组件将再次呈现。

我认为您正在尝试直接改变聊天。请改用

setChat

：

编辑： 您应该将userReducer用于非原语值

---

这是我问题的正确答案。谢谢。

  const writeMessage = (msg) => {
   setChat([...chat, newChat]); // This should re-render
  }