javascript - Js展开运算符和嵌套数组

Question

我有以下对象

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)
                ]
            }]
        }

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

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

Answer 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