Question

如何在groceries方法中更新completed项目（将True设置为toggleGroceryCompleteness）？

我尝试了this.setState({groceries[groceryIndex]:{completed:true});

   constructor(props) {
    super(props);
    this.state = {
      groceries: [
        {
          name: "Apples",
          completed: false
        }
      ],
      newGroceryName: ""
    };

  toggleGroceryCompleteness(groceryIndex) {
    console.log(groceryIndex);
    console.log(this.state.groceries[groceryIndex]);
  }

Answer 1

由于您正在编辑先前设置状态的值，因此您应该使用setState

的定义

this.setState((prevState, props) => {
    const newGroceries = prevState.groceries.slice()
    newGroceries[groceryIndex].completed = true

    return { ...prevState, groceries: newGroceries }
})

这将从groceries调用之前获取setState状态数组的值，并将其分配给要修改的新变量，访问给定索引并将completed属性设置为true。然后返回一个新的对象/状态，其中包含先前状态值的所有内容，但是修改后的groceries属性，这是新修改的版本。

按特定索引更新数组对象

1 个答案: