reactjs - 将对象添加到数组(使用 React 中的 Hooks)

Question

我想使用 Hooks 将一个对象添加到 React 数组中，我正在聊天，我想向消息数组中添加一条新消息，

我尝试过这个:

setMessages([...messages, newMessage]);

这里是更多代码:

const [messages, setMessages] = useState(false);

useEffect(() => {
    socket.open();

    loadMessages();

    return () => {
      socket.close();
    };
  }, []);

useEffect(() => {
    socket.on("send message", data => {
      setMessages([...messages, data]);
    });

    socket.on("delete message", data => {
      setMessages(messages.filter(message => message.id !== data.id));
    });
  });

async function loadMessages() {
    try {
      const dataMessages = await axios.get(
        `http://localhost:5000/api/chat/messages`
      );
      setMessages(dataMessages.data);
    } catch (error) {
      console.log(error);
    }
  }

但是我得到了TypeError:“messages is not iterable”,

有人可以帮助我吗？谢谢!

Answer 1

您正在将消息设置为 bool 值改变这个

const [messages, setMessages] = useState(false);

到

const [messages, setMessages] = useState([]);

然后向数组添加元素，也不要改变消息数组。

希望对你有帮助