0

我正在尝试使用 Socket.io 和 React (hooks) 建立一个聊天室。我有向服务器发出和从服务器发出的事件，但是当我尝试messages在客户端更新我的数组时，该数组会不断被替换，而不是更新。

客户端（反应）

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)} />
);

同样，从服务器成功接收到消息，但我的messages阵列中只有一个项目 - 最新消息。我认为使用扩展运算符（即setMessages([...messages, msg])）会保留其他数组项。我没看到什么？

4

1 回答 1

3

您的代码等效于setMessages([...[], msg])因为messages是 1 个渲染中的常量（请参阅const关键字），并且您仅在第一次渲染中运行 useEffect 内的函数时它是[].

使用功能更新：

setMessages((currentMessages) => [...currentMessages, msg])
于 2019-08-08T19:02:13.240 回答