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

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

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

原文由 Ankit Jayaprakash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在列表末尾插入新元素

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

在列表开头插入新元素

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

原文由 whynot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 Astrit Spanca 发布，翻译遵循 CC BY-SA 4.0 许可协议