在React中使用setState更新对象

Question

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

就像是:

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

我试过了:

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

还有这个:

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

第一个是语法错误,第二个什么都不做.有任何想法吗？

Answer 1

有多种方法可以做到这一点.

1-最简单的一个:

首先创建一个副本,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
})

而不是使用jasper我们也可以像这样写:

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

Answer 2

使用钩子我们可以这样做

const [student, setStudent] = React.useState({name: 'jasper', age: 28});
 setStudent((prevState) => ({
          ...prevState,
          name: 'newName',
        }));

Answer 3

最快,最易读的方式:

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

虽然this.state.jasper已经包含一个名称属性,后者name: 'someothername'可以使用.

Answer 4

在这里使用扩展运算符和一些ES6

this.setState({
    jasper: {
          ...this.state.jasper,
          name: 'something'
    }
})

Answer 5

我知道这里有很多答案，但我很惊讶他们都没有在 setState 之外创建新对象的副本，然后简单地 setState({newObject})。干净、简洁、可靠。所以在这种情况下：

const jasper = { ...this.state.jasper, name: 'someothername' }
this.setState(() => ({ jasper }))

或者对于动态属性（对表单非常有用）

const jasper = { ...this.state.jasper, [VarRepresentingPropertyName]: 'new value' }
this.setState(() => ({ jasper }))

Answer 6

我用过这个解决方案.

如果您有这样的嵌套状态:

this.state = {
  formInputs:{
    friendName:{
      value:'',
      isValid:false,
      errorMsg:''
    },
    friendEmail:{
      value:'',
      isValid:false,
      errorMsg:''
    }
  }
}

您可以声明handleChange函数,该函数复制当前状态并使用更改的值重新分配

handleChange(el) {
    let inputName = el.target.name;
    let inputValue = el.target.value;

    let statusCopy = Object.assign({}, this.state);
    statusCopy.formInputs[inputName].value = inputValue;

    this.setState(statusCopy);
  }

这里是带有事件监听器的html.确保使用与状态对象相同的名称(在本例中为'friendName')

<input type="text" onChange={this.handleChange} " name="friendName" />

Answer 7

创建状态对象

this.state = {
  objName: {
    propertyOne: "",
    propertyTwo: ""
  }
};

使用更新状态setState

this.setState(prevState => ({
  objName: {
    ...prevState.objName,
    propertyOne: "Updated Value",
    propertyTwo: "Updated value"
  }
}));

Answer 8

在功能组件中使用钩子：

const [state, setState] = useState({jasper: { name: 'jasper', age: 28 }})
const nameChangeHandler = () => {
      setState(prevState => ({
            ...prevState,
            prevState.jasper.name = "Anurag",
            prevState.jasper.age = 28
      })
    )
}

在这些情况下，建议使用基于回调的方法来更新状态，因为使用这种方法可以确保之前的状态完全更新，并且我们根据之前更新的状态进行更新。

Answer 9

试试这个，它应该工作正常

this.setState(Object.assign(this.state.jasper,{name:'someOtherName'}));

Answer 10

这是使用immer immutabe 实用程序的另一种解决方案，非常适合轻松深度嵌套的对象，并且您不应该关心突变

this.setState(
    produce(draft => {
       draft.jasper.name = 'someothername'
    })
)