代码之家 › 专栏 › 技术社区 › Alexey K

Js扩展运算符和嵌套数组

spread-syntax redux ecmascript-6 javascript

1

Alexey K · 技术社区 · 8 年前

我有以下目标

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

但它不起作用,它用对象代替媒体。

我不知道如何正确地做这件事。请有人指路并描述一下好吗

1 回复 | 直到 8 年前

1

5

JanS Aymeric Brudey 8 年前

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

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 中)和 line 应为的副本 线 .唯一的区别是 线 和 状态 这是一个数组。创建数组的不可变副本比创建对象的不可变副本要复杂得多。但在代码中,您已经为 changedElement 。

要进一步了解这一点,您应该看看不可变的更新模式,因为这些只是您可以随时重用的方法: https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns