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

要在列表末尾插入新元素

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

要在列表的开头插入新元素

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

Answer 2

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

添加新消息

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

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

Answer 3

真正不需要使用prevState，您可以这样做：

setMessages([...messages, newMessage])

Answer 4

setMessages（prevState => [... prevState，newMessage]）

Answer 5

为了获得更好的可读性并可能控制您的状态，我会这样做：

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

如果状态是数组，则需要在其中添加一个项

let newState = [...messages];
newState.push(1);
setMessages(newState);

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

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

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

5 个答案: