如何设置这个嵌套对象的State？

Question

嗨我在一个电子邮件输入上按下"发送"按钮时遇到设置状态的麻烦.

正如React docs推荐的那样,我正在尝试避免变异.

我的州属性是这样的:

state = {
    emailForm: {
      email: {
        elementType: 'email-invitation-input',
        elementConfig: {
          type: 'email',
          placeholder: 'Enter an email..',
        },
        value: '',
        valid: true,
        required: true
      }
    },
    requestStatus : false,
    validationMessage : null,
    formIsValid: false,
  } 

所以我尝试了三种方法来设置空值到我的电子邮件输入通过状态,但没有人工作:(

首先尝试: 我使用ES6扩展运算符来更改它的值,但它不会更改输入值:

 this.setState({
   email: {
           ...this.state.emailForm.email,
           value: '',
           },
 });

 this.setState({
   email: Object.assign({}, this.state.emailForm.email, {
     value: '',
   }),
 });

另一个尝试使用immutability-helper包

import update from 'immutability-helper';
let newData = { email: {
   ...this.state.emailForm.email,
   value: '',
 }, };

 this.setState({
   email: update(this.state.newData, {
     value: {$set: newData},
   })
 }); 

第二次尝试: 我使用过Ramda.js,但它既不起作用.

setObjectByPath(fieldPath, value) {
  this.setState({
    emailForm: R.set(R.lensPath(fieldPath), value, this.state.emailForm)
  })
}

setObjectByPath(this.state.emailForm.email,'');

第三次尝试:

我用过react-addons-update:

import update from 'react-addons-update';

this.setState({
  email: update(this.state.newData, {
    value: {$set: newData},
  })
 });

所有尝试都不执行任何操作,或者在下面创建一个空值的新电子邮件输入

先谢谢

Answer 1

this.setState(prevState => ({
  emailForm: {
    email: {
      ...prevState.emailForm.email,
      value: ''
    }
  }
}));