javascript - 关于 javascript 如何使用包含键作为属性访问器的方括号来更新对象条目的问题

问题描述

基于 youtube 上的教程（https://www.youtube.com/watch?v=hiiaHyhhwBU&t=1195s）我正在编写一个使用反应钩子的聊天应用程序，特别是 useReducer()。但是我不明白如何在 switch 案例中返回状态的更新版本，只保留两个元素并且不向 initState 添加第三个元素：

const initState = {
    general: [
        {from: 'ciro', msg: 'bella'},
        {from: 'ciro', msg: 'bella'},
        {from: 'ciro', msg: 'bella'}
    ],
    private: [
        {from: 'gennaro', msg: 'hello'},
        {from: 'gennaro', msg: 'hello'},
        {from: 'gennaro', msg: 'hello'}
    ]
}

const reducer = (state, action) => {
    const { topic, from, msg } = action.payload;

    switch(action.type) {
        case 'RECEIVE_MESSAGE':
            return {
                ...state,
                [topic]: [
                    ...state[topic],
                    {
                        from: from,
                        msg: msg
                    }
                ]
            }
        default:
            return state;
    }
}

我想知道 [topic] 如何能够更新与主题相对应的消息列表，因为它没有直接链接到 ...state？以及如何使 ...state 不只是添加了第三个元素？我觉得这很令人困惑。

            return {
                ...state,
                [topic]: [
                    ...state[topic],
                    {
                        from: from,
                        msg: msg
                    }
                ]
            }

感谢您的帮助

标签： javascriptreactjsobjectaccessor

你可以参考这个文档：

基本上当你问：

如何...状态不只是添加了第三个元素？

这是因为：

ECMAScript 提案（ES2018）的 Rest/Spread Properties 向对象文字添加了扩展属性。它将自己的可枚举属性从提供的对象复制到新对象上。 现在可以使用比 Object.assign() 更短的语法来进行对象的浅克隆（不包括原型）或合并。

如果对象具有同名的属性，则最右侧的对象属性将覆盖前一个。

关于：

我想知道 [topic] 是如何更新主题对应的消息列表的？

我认为：Square Brackets Javascript Object Key很清楚，如果不是，请不要犹豫。

javascript - 关于 javascript 如何使用包含键作为属性访问器的方括号来更新对象条目的问题

问题描述

解决方案

推荐阅读