React：使用扩展运算符使用表单数据 onChange 更新状态

Question

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

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

import React from 'react'
import SuperAgent from 'superagent'
import { string } from 'prop-types'

class ContactForm extends React.Component {
  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)
    this.onChange = this.onChange.bind(this)
    this.submitForm = this.submitForm.bind(this)

    this.state = {
      data: {}
    }
  }

  handleClick (e) {
    e.preventDefault()
    this.submitForm()
  }

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

  submitForm () {
    const { data } = this.state
    SuperAgent
      .post('https://something.com')
      .set('Content-Type', 'application/json')
      .send({
        data: {
          'name': 'name',
          'formName': 'form',
          'emailName': 'email',
          data
        }})
      .end((err, res) => {
        if (err || !res || !res.body) return console.log(err)
        window.location='/contact-form-successful.html'
      })
  }

  render () {
    return (
      <section className='contact-form' id={this.props.id}>
          <form id='contact-form' method='post' action='#' onSubmit={this.handleClick}>
            <input
              name="username"
              type="text"
              value=''
              onChange={this.onChange}
            />
            <input
              name="email"
              type="email"
              value=''
              onChange={this.onChange}
            />
            <input
              name="birthdate"
              type="text"
              value=''
              onChange={this.onChange}
            />
            <button>Send data!</button>
          </form>
      </section>
    )
  }
}

export default ContactForm

ContactForm.propTypes = {
  id: string
}

ContactForm.defaultProps = {
  id: 'contact-form'
}

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

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

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