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

Const jasper ={…this.state。贾斯珀，名字:“另一个名字”} this.setState(() => ({jasper}))

或者动态属性(对表单非常有用)

Const jasper ={…this.state。jasper， [VarRepresentingPropertyName]: 'new value'} this.setState(() => ({jasper}))

另一种选择:用Jasper对象定义变量，然后调用一个变量。

扩展操作符:ES6

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

let foo = "something that needs to be saved into state" 

this.setState(prevState => ({
    jasper: {
        ...jasper.entity,
        foo
    }
})

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

Const jasper ={…this.state。贾斯珀，名字:“另一个名字”} this.setState(() => ({jasper}))

或者动态属性(对表单非常有用)

Const jasper ={…this.state。jasper， [VarRepresentingPropertyName]: 'new value'} this.setState(() => ({jasper}))

我用了这个方法。

如果你有一个这样的嵌套状态:

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" />

这个设置对我来说很管用:

let newState = this.state.jasper;
newState.name = 'someOtherName';

this.setState({newState: newState});

console.log(this.state.jasper.name); //someOtherName

通过使用input html的input name属性，我们可以有一个更动态的方法来更新对象属性。

DOM HTML输入名称属性

<input type="text" name="fname" handleChange={(e: any) => { updatePerson(e) }}/>
<input type="text" name="lname" handleChange={(e: any) => { updatePerson(e) }}/>

React / TSX object.assign

const [person, setPerson] = useState<IPerson>({});

   function updatePerson(e: React.ChangeEvent<HTMLInputElement>): void {
        const { name, value } = e.currentTarget;

        setPerson(prevState => {
            const newState = Object.assign(person, { [name]: value })
            return { ...prevState, ...newState };
        });
    }