为什么反应钩子 setState 在这里不起作用，但其他方法呢？答案

【问题标题】：Why react hooks setState doesn't work here, but other method does?为什么反应钩子 setState 在这里不起作用，但其他方法呢？
【发布时间】：2021-01-03 17:57:29
【问题描述】：

我的目标是获取多个成分项目并将它们组合成一个项目（一个食谱）。 Example of effect

我有一个看起来像这样的总餐数数组

numberOfMeals: Array(3)
0: {name: "Meal 1", meals: Array(3)}
1: {name: "Meal 2", meals: Array(0)}
2: {name: "Meal 3", meals: Array(0)}

我通过设置selectedMealNumber状态来选择“Meal 1”。

选择后，我有一个表单组件，我在其中选择名称并将所有 3 种成分的营养信息合并为 1，方法是提交此信息：

selectedMealNumber.meals = [
      {
        product_name: "chicken and rice",
        ingredient_uid: uuidv4(),
        ingredients: selectedMealNumber.meals,
        nutrients: nutrients,
      },
    ];

只是为了说明上面的代码可以完美运行并且 numberOfMeals 数组会更新，我不完全理解如何，但它可以工作。

但我读到应该改用 setState，但是当我使用 setState 时，numberOfMeals 数组不会更新。

    setSelectedMealNumber({
      ...selectedMealNumber,
      meals: [
        {
          product_name: "chicken and rice",
          ingredients: selectedMealNumber.meals,
        },
      ],
    });

请帮帮我，为什么 setState 在这种情况下不起作用，我应该继续使用其他方法吗？

【问题讨论】：

当你说一种“有效”的方式时，你到底是什么意思？就像你 console.log 一样，它是正确的数据？还是做meals = .. 似乎也以某种方式更新了你的html？（除非您在别处打另一个 setState 电话，否则不应该这样做
此外，通过以这种方式引用自己的对象，..这是设计使然吗？这样你就可以做到setSelectedMealNumber.meals[0].indredients[0].ingredients
是的，它确实记录了正确的数据，您可以在参考图片中看到一切都按照我的意愿呈现。

标签： javascript arrays reactjs react-router react-hooks

【解决方案1】：

我不认为您设置状态的方式是最佳的。首先，如果你想在 state 中访问你的餐点，在这里使用一个对象并为每餐点分配一个 ID 可能会更容易一些，而不是通过索引访问数组。

const [numberOfMeals, setNumberOfMeals] = useState({"Meal 1":{name: "Meal 1", meals: Array(3)},"Meal 2":{name: "Meal 2", meals: Array(0)},"Meal 3":{name: "Meal 3", meals: Array(0)}})

现在，当您更新“Meal 1”而不是数组 [0] 时，很容易看到您在做什么，因为它使事情更加具体。旁注：您可能还想重新考虑变量名称“numberOfMeals”。变量真的存储了一个数字吗？

为了清楚起见，我没有更改它。

现在您必须找到更新餐点数组的正确位置，因为它无法在顶层访问，就像您在示例中尝试执行的那样。

setNumberOfMeals({...numberOfMeals, "Meal 1":{...numberOfMeals["Meal 1"], meals:[newMeal]}})

为了做到这一点，你需要一路“展开”直到你到达吃饭的钥匙。

更明确地说：在 numberOfMeals 中，我们想调整键“Meal 1”处的对象。在 "Meal 1" 中，我们正在寻找餐键并相应地调整数组。

【讨论】：