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

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

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

是这样的吗？

setMessages(previousState => ({...stat

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

Answer 1

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

添加新消息

您尝试做的是 return 一个对象，因为 {} 是一个代码块，所以如果您 return 是一个对象，则需要将其包装在 () 中这就是你想要做的

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

Answer 2

在列表末尾插入新元素

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

在列表的开头插入新元素

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

Answer 3

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

setMessages([...messages, newMessage])

Answer 4

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

Answer 5

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

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

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

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

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

如果状态是一个对象，你需要更新其中的一个属性

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

or

setMessages(prevState => {...prevState, name: "Michael Scott" });

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

how to set state array using react hooks

setstate

reactjs

react-native

react-hooks