Оператор распространения JS и вложенные массивы - PullRequest
Новая
       42

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

0 голосов
/ 27 апреля 2018

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

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 Ответ

0 голосов
/ 27 апреля 2018

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

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

...