Js展开运算符和嵌套数组

Posted 2023-02-22

【中文标题】Js展开运算符和嵌套数组

【英文标题】：Js spread operator and nested arrays

【发布时间】：2018-10-07 21:53:07

【问题描述】：

我有以下对象

state = "line": [
   "media": [1, 2, 3 ],
   "media": [],
   "media": [],
]

我需要删除媒体数组中的元素。

我尝试以下方法

return 
            ...state, line: [
                ...state.line[line_index], media = [
                        ...state.line[line_index].media.slice(0, action.payload.index),
                        ...state.line[line_index].media.slice(action.payload.index + 1)
                ]
            ]
        

但它不起作用，它用对象替换媒体。

我不知道如何正确地做到这一点。有人能指路并描述一下吗

【问题讨论】：

不应该是media:而不是media =吗？

不，这样它会删除除修改对象之外的所有对象

你想达到什么目的？您的操作负载是什么样的？

我需要删除媒体数组中的元素。

【参考方案1】：

您忘记的是正确地重新组装线阵列。尝试像这样分解它：

const changedElement = 
    ...state.line[lineIndex],
    media: [
        ...state.line[lineIndex].media.slice(0, action.payload.index),
        ...state.line[line_index].media.slice(action.payload.index + 1)
    ]


return 
    ...state,
    line: [
        ...state.line.slice(0, line_index),
        changedElement,
        ...state.line.slice(line_index + 1)
    ]

你要做的是写下你的状态的当前结构：

state = 
    line: [
        
            media: []
        ,
        
            media: []
        
    ]

然后您可以做的是使其通用并包含状态。所以，state 应该是state 的副本（通过将...state 放入其中），line 应该是line 的副本。 line 和 state 之间的唯一区别是它是一个数组。制作数组的不可变副本比制作这样的对象副本要复杂一些。但是在您的代码中，您已经为您的changedElement 执行了此操作。

要进一步阅读，您应该查看不可变更新模式，因为这些只是您可以随时重复使用的秘诀：https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

【讨论】：

效果很好，非常感谢。请你这么好心，一步一步地描述，因为对我来说，每次我不得不处理嵌套数组和传播操作时都很痛苦。