如何设置此嵌套对象的状态？

Question

你好，我在设置一个电子邮件输入框上的“发送”按钮时遇到了麻烦，无法成功设置状态。

我正在尝试按照React文档推荐的方式避免突变。

我的状态属性如下：

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

所有尝试都没有作用，或者它会在下面创建一个新的电子邮件输入框，并留空值。

提前感谢。

- maudev

Answer 1

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

- quirimmo

---

运行得很好，但我仍然怀疑如何使用那些包来设置我的状态，无论如何感谢你！ - maudev