Question

我正在尝试使用spread运算符更新状态，以便可以在http请求中传递表单数据，但是从我在console.logs中看到的内容来看，它似乎根本没有更新。

我也收到错误“ TypeError：传播不可迭代实例的无效尝试”。我需要将传入的数据作为对象。

  const handleDomainsChange = () => {   
      let filteredArr = listArr.filter(el => el.length > 0)
      setFormData({
        ...formData,
        ...filteredArr,
      })
    }

Answer 1

您使用setState错误

this.setState(...this.state.data, {[e.target.name]: e.target.value })

应该是

 const { target : { value, name } } = e
 this.setState(prevState => ({
     data: {
        ...prevState.data,
        [name]: value
     }
 }))

输入的value也应反映state（受控输入）

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

Answer 2

您的onChange方法应该这样做：

 onChange (e) {
    this.setState(state => ({
        data: {
           ...state.data,
           [e.target.name]: e.target.value
        }
    }))
  }

Answer 3

spread运算符的正确语法用法如下：

  onChange (e) {
    this.setState({...this.state.data, [e.target.name]: e.target.value })
  }

但是，您不需要使用setState进行传播，只需更新所需的内容即可。

因此，您只需要设置如下状态：

  onChange (e) {
    this.setState({[e.target.name]: e.target.value })
  }

如果要依赖先前的状态值，则必须使用功能性setState

  onChange (e) {
    this.setState(prevState => ({...prevState, [e.target.name]: e.target.value }))
  }

除此之外，您还缺少要从react组件的状态中检索到的输入值，而是将其硬编码为''空字符串，因此当您的状态保持使用最后一个键进行更新时，该值永远不会反映在输入中输入。

        <input
          name="username"
          type="text"
          value={this.state.username}
          onChange={this.onChange}
        />
        <input
          name="email"
          type="email"
          value={this.state.email}
          onChange={this.onChange}
        />
        <input
          name="birthdate"
          type="text"
          value={this.state.birthdate}
          onChange={this.onChange}
        />

反应：使用传播运算符使用表单数据onChange更新状态

3 个答案: