在React中使用setState更新对象

reactjs React.js

老丝米亚

2020-03-10

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

就像是:

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

我试过了:

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

还有这个:

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

第一个导致语法错误,第二个则什么都不做。有任何想法吗?

第482篇《在React中使用setState更新对象》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
Harry路易小卤蛋 2020.03.10

简单而动态的方式。

这样就可以了,但是您需要将所有id都设置为父对象,这样父对象将指向对象的名称,即id =“ jasper”,并在对象jasper内将输入元素的名称=属性命名。

handleChangeObj = ({target: { id , name , value}}) => this.setState({ [id]: { ...this.state[id] , [name]: value } });
樱小胖 2020.03.10

同样,遵循Alberto Piras解决方案,如果您不想复制所有“状态”对象:

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

    let jasperCopy = Object.assign({}, this.state.jasper);
    jasperCopy[inputName].name = inputValue;

    this.setState({jasper: jasperCopy});
  }
理查德村村小宇宙 2020.03.10

您可以尝试:(注意:输入标签的名称===对象的字段)

<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 
   })
}
Gil伽罗小宇宙 2020.03.10

我用了这个解决方案。

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android