Добавление объекта в массив внутри массива с помощью useReducer

редуктор:

function reducer(state, action) {
    switch (action.type) {
        case 'addAnotherBox':
            return ????state[action.index] = [...state[action.index] + object;
      default:
        throw new Error();
    }
  }
  

крюк

const [listState, listDispatch] = useReducer(reducer, list)

начальные состояния/переменные

let object = {
    comment:""
}
let box = [object]
let list = [box, []]

функция:

const AddBox = (e, index) => {
    listDispatch({type:"addAnotherBox", index})
}   

кнопка:

            { listState.map((data, index)=> (
<Button variant = "outlined" onClick = {(e) => AddBox(e, index)}>
    Add box </Button> ))}

Моя проблема в том, что возврат.

Я понятия не имею, что туда положить, я неопытен с useReducer, и мутация массивов в состоянии кажется хуже.

Я знаю, если бы это было просто добавление чего-то в массив, я мог бы пойти:

[...state, object]

но поскольку он так сильно вложен, как бы вы это изменили?

🤔 А знаете ли вы, что...
React поддерживает однонаправленный поток данных (unidirectional data flow) для предсказуемого управления состоянием.


1
287
1

Ответ:

Решено

Я не думаю, что вы можете сделать это в одну строку, но вы можете сделать это шаг за шагом.

case 'addAnotherBox':
    let stateCopy = [...state]; //copy the actual state
    stateCopy[action.index] = state[action.index] ? [...state[action.index], object] : [object]; //if state[action.index] already exists it adds your object, if it does not exist yet it creates a new array containing your object
    return stateCopy; // return stateCopy as the new state