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：“消息不可迭代” ，

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

Answer 1

使用更合适的默认值（相同类型）：

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

然后，您将始终能够传播messages。

Answer 2

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

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

到

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

然后将元素添加到数组，也不要使message数组发生变异。

希望有帮助

Answer 3

之所以发生这种情况，是因为message的初始值为boolean，并且您无法将其传播到新的message数组中。

尝试：

/node[@attribute = 'value1' or @attribute = 'value2']/text()

Answer 4

使用： const [消息，setMessages] = useState([]);

向数组添加对象（React中的Hooks）

4 个答案: