如何在反应中将对象列表添加到 useState([])？

Question

我正在尝试将 [{}, {}, {} ] 添加到 useState([])

const [messages, setMessages] = useState([]);
const fetchMessage = (fetched_messages) => {
  if (fetched_messages) {
    setMessages([...messages, fetched_messages]);
  }
};
//fetched_messages = [{},{},{},{}]

但结果是 messages = [[{}, {}, {}, {}]].

所以我这样试过

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

const fetchMessage = (fetched_messages) => {
  if (fetched_messages) {
    var i
    for (i=0; i<fetched_messages.length; i++) {
        setMessages([...messages, fetched_messages[i]])
    }
  }
}

但是消息是空的。

谁能告诉我为什么会这样以及如何解决

谢谢:)

Answer 1

你的fetched_messages是一个数组，有状态的messages也是一个数组。要正确设置状态，请执行：

setMessages(messages.concat(fetched_messages));

或

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

why this happened

在你的第一个代码中，这是因为你将响应数组作为一个项目放在更大的数组中：

const fetched_messages = [{}, {}];
setMessages([...messages, fetched_messages])
// results in
setMessages([...messages, [{}, {}]])
// if messages is an empty array to start with:
setMessages([             [{}, {}]])
setMessages([[{}, {}]])

这不是你想要的。

在您的第二个代码中，这是因为 messages 数组变量 在您调用 setMessages 时不会更改 - 状态变量是不可变的 const，因此只有最后的 setMessages 调用会导致下一次渲染可见的更改。

如果fetchMessage恰好只出现一次，在挂载时，那么你根本不需要使用现有状态，只需将新状态设置到响应数组即可：

setMessages(fetched_messages);

如何在反应中将对象列表添加到 useState([])？

How to add list of objects to useState([]) in react?

reactjs

use-state