Javascript 状态未更新

我正在学习React，我的程序中有一部分工作正常，但有一部分在我更新状态时没有更新，我不知道为什么

我有一份配料清单，一份包含配料的食谱清单，还有一份包含配料清单的购物清单，其数量与添加到购物清单中的所有食谱相结合

我把所有这些都保存在状态中

state = {
    ingredients: {},
    instructions: {},
    recipes: {},
    shoppingList: {
      ingredients: {}
    }
  }

当我添加一个菜谱，将配料添加到菜谱中，并将菜谱添加到购物清单中时，这就是状态的样子。如果我修改食谱要求2个西红柿而不是1个西红柿，购物清单就会更新。但是，如果我在食谱中添加了一种新的配料，则购物清单不会随着新配料而更新。我不知道为什么

以下是程序的其余代码：

addRecipe = recipe => {
    // copy state
    const recipes = { ...this.state.recipes };
    // add recipe to copy
    recipes[`recipe${Date.now()}`] = recipe;
    // set state
    this.setState({ recipes: recipes });
  }

  loadSampleRecipes = () => {
    this.setState({ recipes: sampleRecipes });
  }

  addIngredient = ingredient => {
    // copy state
    const ingredients = { ...this.state.ingredients };
    // add ingredient to copy
    ingredients[`ingredient${Date.now()}`] = ingredient;

    // set state
    this.setState({ ingredients: ingredients });
  }

  updateIngredient = ingredient => {
    // copy state
    const ingredients = { ...this.state.ingredients };

    ingredients[ingredient].price = 99;

    // set state
    this.setState({ ingredients: ingredients });
  }

  loadSampleIngredients = () => {
    this.setState({ ingredients: sampleIngredients });
  }

  addIngredientToRecipe = (recipe, ingredient) => {
    // copy state
    const recipes = { ...this.state.recipes };

    // add ingredient
    recipes[recipe].ingredients[ingredient] = this.state.ingredients[ingredient];
    recipes[recipe].ingredients[ingredient].qty = recipes[recipe].ingredients[ingredient].qty + 1 || 1; // not sure if this is needed
    // set state
    this.setState({ recipes: recipes });
  }

  deleteIngredientFromRecipe = (recipe, ingredient) => {
    // copy state
    const recipes = { ...this.state.recipes };

    // remove ingredient from recipe
    delete recipes[recipe].ingredients[ingredient];

    // set state
    this.setState({ recipes: recipes });
  }

  addIngredientsToShoppingList = (ingredients) => {
    // copy state
    const shoppingList = { ...this.state.shoppingList}

    // add ingredient or increase qty
    Object.keys(ingredients).forEach(ingredient => {
      const newIngredient = ingredients[ingredient] // copy current incoming ingredient

      // add qty together
      if (shoppingList.ingredients[ingredient]) {
        shoppingList.ingredients[ingredient].qty += newIngredient.qty;
      } else {
        shoppingList.ingredients[ingredient] = newIngredient;
      }
    });
    console.log(shoppingList);

    // set state
    this.setState({ shoppingList: shoppingList });
  }

假设您使用useState钩子

销毁状态，因为所有属性（增量除外）都将丢失。为了更新您将使用的增量

setState({                      // create new state  
    ...state,                   // spread the current state, keeps unchanged props
    incredients: incredients    // overwrite the changed property
})

---

在更新Recipes和shoppingList时，您也遇到了同样的问题。有关详细说明，请参阅。

仅使用一个属性调用setState只会更改该属性。它不会破坏其他属性。示例：@Cully谢谢你的评论。如果使用useState钩子，这是不同的。是的，useState的工作方式不同。但是OP正在使用setState。

setState({                      // create new state  
    ...state,                   // spread the current state, keeps unchanged props
    incredients: incredients    // overwrite the changed property
})