如何使用 React 钩子设置状态数组

Question

提前感谢。 我有一个状态数组，如下所示。

我需要将一个项目添加到状态数组中，我发现我们不需要进行状态突变。如何使用上一个状态设置状态。

const [messages, setMessages] = React.useState(
[
{
_id: 12,
createdAt: new Date(),
text: 'All good',
user: {
_id: 1,
name: 'Sian Pol',
}
},
{
_id: 21,
createdAt: "2019-11-10 22:21",
text: 'Hello user',
user: {
_id: 2,
name: 'User New'
}
}]
)

如何调用设置状态来附加此状态数组。

像这样的东西？

setMessages(previousState => ({...stat

谁能帮我获取上面的行代码。

Answer 1

在列表末尾插入新元素

const addMessage = (newMessage) => setMessages(oldMessages => [...oldMessages, newMessage])

在列表开头插入新元素

const addMessage = (newMessage) => setMessages(oldMessages => [newMessage, ...oldMessages])

Answer 2

更具可读性和更清晰的解决方案是：

创建一个保存实际状态副本的变量：

如果状态是一个数组，你需要在其中添加一个元素

const newState = [...messages, 'Hi buddy'];
setMessages(newState);

or
setMessages(prevState => [...prevState, "Hi Buddy"]);

如果 state 是一个对象，并且您需要更新其中的属性

const newState = Object.assign({}, message, {name: 'Michael Scott'});
setMessages(newState);
or
setMessages(prevState => {...prevState, name: "Michael Scott" });

Answer 3

您的状态是一个数组，因此您需要将以前的状态分散到一个新数组中，并使用[...prevState, newMessage]添加新消息

您尝试做的是返回一个对象，因为{}是一个代码块，因此您需要将其包装在()如果您返回一个您正在尝试执行的对象

setMessages(prevState => [...prevState, newMessage])

Answer 4

setMessages(prevState => [...prevState, newMessage])

Answer 5

没有真正需要使用prevState，你可以这样做：

setMessages([...messages, newMessage])