如何使用钩子将项目附加到 React 组件中的数组？

Question

我正在尝试使用 Socket.io 和 React（挂钩）构建聊天室。我有事件被发送到服务器和从服务器发出，但是当我尝试在客户端更新我的 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])）会保留其他数组项。我没看到什么？

Answer 1

你的代码等价于setMessages([...[], msg])因为messages是1个渲染中的常量（见const关键字），而你只运行useEffect中的函数在第一次渲染时 [].

使用functional updates:

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

如何使用钩子将项目附加到 React 组件中的数组？

How can I append an item to an array in a React component using hooks?

socket.io

spread-syntax

react-hooks

use-effect