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

基于youtube（）上的教程，我正在编写一个聊天应用程序，使用react钩子，特别是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;
    }
} 

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

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

---

感谢您的帮助

您可以参考以下文档：

基本上当你问：

如何使…状态不只是添加第三个元素

这是因为：

ECMAScript提案的Rest/Spread属性（ES2018）将Spread属性添加到对象文本中。它将自己的可枚举属性从提供的对象复制到新对象上。 对象的浅层克隆（不包括原型）或合并现在正在进行中 可能使用比Object.assign（）更短的语法。

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

关于：

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

---

我认为：这是非常清楚的，如果不是，请毫不犹豫地提问。

这是否回答了您的问题？你回答的前半部分确实回答了我在下半部分的问题，我想我没有很好地表达自己，因为我想知道[主题]如何知道需要更新状态属性，因为它与状态属性没有直接关联，但你在上半部分回答了这个问题。非常有帮助，谢谢！