Question

我正在学习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 });
  }

Answer 1

假设您使用了useState钩子

setState({incredients: incredients})

破坏状态，因为所有属性都会丢失，但不可思议。为了更新内容，您将使用

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

更新收据和shoppingList时遇到相同的问题。有关详细说明，请参见Updating an object with setState in React。

状态未更新

1 个答案: