Оператор распространения Js и вложенные массивы

У меня есть следующий объект

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

но это не работает, он заменяет медиа объектом.

Я не понимаю, как это сделать правильно. Может кто-нибудь показать путь и описать его, пожалуйста


javascript redux spread-syntax ecmascript-6
person Alexey K    schedule 27.04.2018    source источник
comment
Разве это не должно быть media: вместо media =?   -  person Sebastian Simon    schedule 27.04.2018
comment
нет, таким образом он удаляет все объекты, кроме модифицированного   -  person Alexey K    schedule 27.04.2018
comment
чего вы хотите достичь? как выглядит полезная нагрузка ваших действий?   -  person JanS    schedule 27.04.2018
comment
Мне нужно удалить элемент в медиа-массиве.   -  person Alexey K    schedule 27.04.2018

Ответы (1)


arrow_upward
3
arrow_downward

То, что вы забыли, это правильная сборка линейного массива. Попробуйте разбить его так:

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-шаблоныобновления

person JanS    schedule 27.04.2018
comment
это прекрасно работает, большое спасибо. не могли бы вы быть так любезны и описать пошагово, потому что для меня это боль каждый раз, когда приходится иметь дело с вложенными массивами и выкладывать оп. - person Alexey K; 27.04.2018