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

Question

提前致谢。我有一个如下的状态数组。

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

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'
                }
            }]
    )

我如何调用 set State 来附加这个状态数组。

像这样的东西？

setMessages(previousState => ({...stat

任何人都可以帮助我获得上述行代码。

Answer 1

在列表末尾插入新元素

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

在列表的开头插入新元素

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

Answer 2

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

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

如果 state 是一个数组并且您需要在其中添加一个元素

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" });