Javascript 深嵌套状态的减速器

一段时间以来，我一直在尝试设计一个深度嵌套状态的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,
   })
  }

---

如何到达这样一个物体？我已经找了一段时间的解决方案，但什么也找不到。谢谢您的帮助：）

希望这会有所帮助

案例“获取配料盒值”：
const{components}=状态；
成分[作用指数]={
…成分[作用指数]，
[action.name]：action.value
};
返回{
……国家，
成分：[…成分]，
};

希望这能有所帮助

案例“获取配料盒值”：
const{components}=状态；
成分[作用指数]={
…成分[作用指数]，
[action.name]：action.value
};
返回{
……国家，
成分：[…成分]，
};