在 React 中使用 setState 更新对象 [英] Updating an object with setState in React

问题描述

是否可以使用 setState 更新对象的属性?

Is it at all possible to update object's properties with setState?

类似于:

this.state = {
   jasper: { name: 'jasper', age: 28 },
}

我已经尝试过:

this.setState({jasper.name: 'someOtherName'});

还有这个:

this.setState({jasper: {name: 'someothername'}})

第一个导致语法错误，第二个什么也不做.有什么想法吗?

The first results in a syntax error and the second just does nothing. Any ideas?

推荐答案

有多种方法可以做到这一点，因为状态更新是一个 异步操作，所以要更新状态对象，我们需要使用updater 函数 和 setState.

There are multiple ways of doing this, since state update is a async operation, so to update the state object, we need to use updater function with setState.

1- 最简单的一个:

首先创建一个 jasper 的副本，然后进行更改:

First create a copy of jasper then do the changes in that:

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 我们也可以这样写:

Instead of using Object.assign we can also write it like this:

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 和 Spread Operator 仅创建 浅拷贝，因此如果您定义了嵌套对象或对象数组，则需要不同的方法.

Note: Object.assign and Spread Operator creates only shallow copy, so if you have defined nested object or array of objects, you need a different approach.

假设您已将状态定义为:

Assume you have defined state as:

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

更新pizza对象的extraCheese:

To update extraCheese of pizza object:

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

更新对象数组:

假设您有一个待办事项应用程序，并且您正在以这种形式管理数据:

Updating array of objects:

Lets assume you have a todo app, and you are managing the data in this form:

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

要更新任何 todo 对象的状态，请在数组上运行映射并检查每个对象的某个唯一值，在 condition=true 的情况下，返回具有更新值的新对象，其他相同的对象.

To update the status of any todo object, run a map on the array and check for some unique value of each object, in case of condition=true, return the new object with updated value, else same object.

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

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

}))

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

Suggestion: If object doesn't have a unique value, then use array index.

这篇关于在 React 中使用 setState 更新对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！