редуктор:
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) для предсказуемого управления состоянием.
Я не думаю, что вы можете сделать это в одну строку, но вы можете сделать это шаг за шагом.
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