时间戳

首页 > 解决方案 > 无法通过函数调用使用 useState 挂钩设置状态

javascript - 无法通过函数调用使用 useState 挂钩设置状态

问题描述

我已经像这样设置了我的初始状态对象：

const [Item,SetItem] = useState(
        {
            description: "Chicken",
            foodNutrients:[
            {nutrientName: "Protein", nutrientNumber: "203", value: 10},
            {nutrientName: "Fat", nutrientNumber: "204",  value: 15},
            {nutrientName: "Carbs", nutrientNumber: "205", value: 20}
            ]
        }
    )

我想通过遍历 foodNutrient 数组并将按钮单击时的值加倍来修改我现有的对象，然后将更新的对象存储在 useState 挂钩中。

 const Double = e => {
        SetItem(Item.foodNutrients.forEach(foodNutrient => foodNutrient.value *= 2))
        console.log(Item)
    }

它在我第一次尝试单击时将正确的结果记录到控制台<button onClick={Double}>Set state</button>，但第二次它抛出Cannot read property 'foodNutrients' of undefined并且我无法渲染任何东西。

标签： javascriptarraysreactjsreact-hooks

解决方案

事件处理程序中的逻辑将初始对象替换为undefined因为默认Array.prototype.forEach返回undefined。

你需要做的是：

  1. map到具有新值的数组
  2. 保留先前的状态并将状态中的数组值设置为新的映射数组
const Double = (e) => {
  const foodNutrientsNew = Item.foodNutrients.map((foodNutrient) => ({
    ...foodNutrient,
    value: foodNutrient.value * 2,
  }));
  SetItem((prev) => ({ ...prev, foodNutrients: foodNutrientsNew }));
};

更新

我还建议重构您的代码并将其拆分为更多组件。只需在此处关注官方文档文章

推荐阅读