有多种方法可以执行此操作，因为状态更新是异步操作，因此要更新状态对象，我们需要使用带有updater函数

setState

1-最简单的一个：

首先创建的副本，

jasper

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})

除了使用，

Object.assign

let jasper = { ...prevState.jasper };

2-使用 扩展运算符：

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.assign

SpreadOperator

更新嵌套状态对象：

假设您已将状态定义为：

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

要更新披萨对象的ExtraCheese：

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  )}))

建议： 如果对象没有唯一值，则使用数组索引。