有多种方法可以做到这一点,因为状态更新是一种异步操作,所以要更新状态对象,我们需要将更新程序函数与setState一起使用。

拷贝

this.setState(prevState => {
  let jasper = Object.assign({}, prevState.jasper);  // creating copy of state variable jasper
  jasper.name = 'someothername';                     // update the name property, assign a new value                 
  return { jasper };                                 // return new object jasper object
})

第二种 使用延展语法

this.setState(prevState => ({
    jasper: {                   // object that we want to update
        ...prevState.jasper,    // keep all other key-value pairs
        name: 'something'       // update the value of specific key
    }
}))

注意:Object.assignSpread 运算符仅创建浅拷贝,因此,如果您定义了嵌套对象或对象数组,则需要使用不同的方法。

更新嵌套对象

假设有以下这个数据结构

this.state = {
  food: {
    sandwich: {
      capsicum: true,
      crackers: true,
      mayonnaise: true
    },
    pizza: {
      jalapeno: true,
      extraCheese: false
    }
  }
}

要更新披萨对象的额外奶酪:

this.setState(prevState => ({
  food: {
    ...prevState.food,           // copy all other key-value pairs of food object
    pizza: {                     // specific object of food object
      ...prevState.food.pizza,   // copy all pizza key-value pairs
      extraCheese: true          // update value of specific key
    }
  }
}))

更新对象数组:

假设您有一个待办事项应用程序,并且您正在以以下格式的管理数据:

this.state = {
  todoItems: [
    {
      name: 'Learn React Basics',
      status: 'pending'
    }, {
      name: 'Check Codebase',
      status: 'pending'
    }
  ]
}

要更新任何待办事项对象的状态,请在数组上运行映射并检查每个对象的某些唯一值,如果 condition=true,则返回具有更新值的新对象,否则为同一对象。

let key = 2;
this.setState(prevState => ({

  todoItems: prevState.todoItems.map(
    el => el.key === key? { ...el, status: 'done' }: el
  )

}))

建议:如果对象没有唯一值,则使用数组索引

标签: 函数, false, 对象, let, 操作, the, name, 程序, value, key, 数据, 状态, true, 索引, 更新, 拷贝, 运算, 管理, jasper, prevstate, object

知识共享许可协议
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

评论暂时关闭了,可以过段时间再试

  • 目录