如何使用react-hooks设置状态数组

IT技术 reactjs react-native react-hooks setstate
2021-05-05 09:49:14

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

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

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

4个回答

在列表末尾插入新元素

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

在列表的开头插入新元素

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

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

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

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

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

setMessages([...messages, newMessage])

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

你试图做的是返回一个对象，因为它{}是一个代码块，所以()如果你返回一个你想要做的对象，你需要把它包装在里面

setMessages(prevState => [...prevState, newMessage])
其它你可能感兴趣的问题
上一篇SkyNet3D 固件主页设置 下一篇Z轴不向上移动