Socket.io 如何使用挂钩将项附加到React组件中的数组？

我正在尝试使用Socket.io和React（hooks）构建一个聊天室。我向服务器发送或从服务器发送事件，但当我尝试在客户端更新我的

消息

数组时，该数组会不断被替换，而不是更新

客户端（反应）

const socket=io（process.env.REACT\u APP\u API\u URL）；
const[currentMessage，setCurrentMessage]=useState（null）；
const[messages，setMessages]=useState（[]）；
函数sendMessage（e）{
e、 预防默认值（）；
//向服务器发送消息
发出（'add'，currentMessage）；
}
useffect（（）=>{
//侦听来自服务器的添加消息事件
socket.on（'add'，函数（msg）{
//将新消息添加到消息数组
setMessages（[…messages，msg]）；
});
}, []);
//循环浏览消息
const items=messages.map（（消息，键）=>
{msg}
);
返回(

{items}

setCurrentMessage（e.target.value）}>
sendMessage（e）}/>
);

---

同样，从服务器成功接收到消息，但我的

消息

数组中只有一个项—最新消息。我认为使用spread操作符（即

setMessages（[…messages，msg]）

）将保留其他数组项。我没有看到什么？

您的代码相当于

setMessages（[…[]，msg]）

，因为

messages

在1次渲染中是一个常量（请参见

const

关键字），您只在第一次渲染时在useffect中运行函数

[]

使用：

---

您的代码相当于

setMessages（[…[]，msg]）

，因为

messages

在1次渲染中是一个常量（请参见

const

关键字），并且您仅在第一次渲染时在useffect内运行函数

使用：

---

您确定正在向服务器发送

消息

？我看不到在哪里定义了

消息

。我看到一条

currentMessage

和

messages

，但没有看到

message

@MikeHorn的好消息。我的错误。emit函数中的

消息

确实应该是

currentMessage

。您确定要向服务器发送

消息

？我看不到在哪里定义了

消息

。我看到一条

currentMessage

和

messages

，但没有看到

message

@MikeHorn的好消息。我的错误。emit函数中的

消息

确实应该是

currentMessage

。这样就行了！谢谢你的解释。这对我来说是有意义的。这很有效！谢谢你的解释。现在对我来说这很有意义。

const socket = io(process.env.REACT_APP_API_URL);
const [currentMessage, setCurrentMessage] = useState(null);
const [messages, setMessages] = useState([]);

function sendMessage(e) {
  e.preventDefault();

  // emit message to server
  socket.emit('add', currentMessage);
}

useEffect(() => {

  // listen for add message event from server
  socket.on('add', function(msg) {
    // add new message to messages array
    setMessages([...messages, msg]);
  });

}, []);

// loop through messages
const items = messages.map((msg, key) =>
  <li key={key}>{msg}</li>
);

return (
  <ul className="chat">
    {items}
  </ul>
  <input type="text" onChange={(e) => setCurrentMessage(e.target.value)}>
  <button type="submit" onClick={(e) => sendMessage(e)} />
);

setMessages((currentMessages) => [...currentMessages, msg])