是否有可能更新对象的属性与setState?

喜欢的东西:

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

我试过:

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

这:

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

第一个会导致语法错误,第二个则什么都不做。什么好主意吗?


当前回答

试试这个,应该没问题

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

其他回答

创建一个状态对象

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

使用setState更新状态

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

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

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

this.setState({newState: newState});

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

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

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

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

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

你可以试试这个: (注:输入标签的名称===对象字段)

<input name="myField" type="text" 
      value={this.state.myObject.myField} 
     onChange={this.handleChangeInpForm}>
</input>

-----------------------------------------------------------
handleChangeInpForm = (e) => {
   let newObject = this.state.myObject;
   newObject[e.target.name] = e.target.value;
   this.setState({
     myObject: newObject 
   })
}

第一种情况确实是语法错误。

因为我看不到组件的其余部分,所以很难理解为什么要在这里的状态中嵌套对象。在组件状态下嵌套对象不是一个好主意。尝试将初始状态设置为:

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

这样,如果你想要更新名称,你可以调用:

this.setState({
  name: 'Sean'
});

这能达到你的目标吗?

对于更大、更复杂的数据存储,我会使用Redux之类的东西。但这要高级得多。

关于组件状态的一般规则是只使用它来管理组件的UI状态(例如,活动,计时器等)。

看看这些参考资料:

https://facebook.github.io/react/docs/react-component.html#state https://facebook.github.io/react/docs/state-and-lifecycle.html