Редуктор в глубоко вложенном состоянии

Какое-то время я пытался придумать useReducer для глубоко вложенного состояния.

const initialState = {
  typeOfMeal: "breakfast",
  protein: "",
  carbs: "",
  fat: "",
  mainPhoto: "",
  platePhoto: "",
  ingredients: [
    {
      ingredientName: "",
      ingredientQuantity: "",
      ingredientUnit: "g",
      ingredientId: 0,
    },
  ],
};

объекты в ингредиентах генерируются динамически, и это прекрасно работает, но я не могу их обновить. Это случай, отвечающий за обновление этих объектов:

case "GET_INGREDIENT_BOX_VALUE":
      return {
        ...state,
        ingredients: [
          ...state.ingredients,
          { ...state.ingredients[action.index], [action.name]: action.value },
        ],
      };

И пример фрагмента объекта, который я хочу обновить:

name="ingredientName"
value={state.ingredients[box.ingredientId].ingredientName}
 onChange={(e) =>
   dispatch({
   type: "GET_INGREDIENT_BOX_VALUE",
   value: e.target.value,
   index: box.ingredientId,
   name: e.target.name,
   })
  }

Как добраться до такого объекта? Я давно ищу решение и ничего не могу найти. Спасибо за помощь :)


reactjs javascript use-reducer
person BetaHydroksyMaslan    schedule 30.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Надеюсь, это может быть полезно.

case "GET_INGREDIENT_BOX_VALUE":
  const { ingredients } = state;
  ingredients[action.index] = {
    ...ingredients[action.index],
    [action.name]: action.value
  };
  return {
    ...state,
    ingredients: [...ingredients],
  };
person baymax    schedule 30.11.2020