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

Posted 2023-02-15

【中文标题】如何使用反应钩子设置状态数组

【英文标题】：how to set state array using react hooks

【发布时间】：2020-03-24 19:40:09

【问题描述】：

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

我需要向状态数组添加一个项目，我发现我们不需要进行状态突变。如何使用 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

谁能帮我得到上面的行代码。

【问题讨论】：

这能回答你的问题吗？ Push method in React Hooks (useState)?

【参考方案1】：

在列表末尾插入新元素

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

在列表开头插入新元素

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

【讨论】：

就我而言，使用 push 是一个问题，因为我从 push 本身返回结果，它返回数组的新长度，而不是数组本身。 setSelectedList(prevState => prevState.push(val)) 将状态对象设置为数组的长度，换句话说。

【参考方案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" );

【讨论】：

我认为这会改变状态。

不确定

@AnkitJayaprakash 这就是 ...spread 运算符所做的，制作一个副本，因此不会发生突变

【参考方案3】：

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

setMessages([...messages, newMessage])

【参考方案4】：

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

你尝试做的是返回一个对象，因为 是一个代码块，所以如果你返回一个你想要做的对象，你需要将它包装在() 中

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

【参考方案5】：

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