setState 后无法获取表单数据

Question

我试图在我的 React 应用程序中使用 redux 提交到 firebase 数据库后发送表单数据，但我无法发送状态所以我尝试通过 [= 跟踪表单数据13=] 但表单数据为空。我可以控制台日志 params 但不能 this.state

下面是代码。

我在此应用程序中使用 redux。 createUser是我的行动

import React, { Component } from "react";
import { connect } from "react-redux";
import { createUser } from "../store/actions/userActions";

class UserForm extends Component {
  constructor(props) {
    super(props);
    this.state = { form: [], alert: false, alertData: {} };
    this.submitMessage = this.submitMessage.bind(this);
  }

  submitMessage = e => {
    e.preventDefault();
    const params = {
      name: this.inputName.value,
      email: this.inputEmail.value,
      city: this.inputCity.value,
      age: this.inputAge.value
    };
    this.setState({ form: params });
    console.log(params);
    console.log("-----------");
    console.log(this.state);
     this.props.createUser(this.state);
  };

  render() {
    return (
      <div className="container">
        <div
          className="row"
        >
          User
        </div>
        <div className="container" style={{ padding: `10px 0px` }} />

        <div className="row">
          <div className="col-sm-4">
            <h2>Contact Form</h2>
            <form onSubmit={this.submitMessage} ref="contactForm">
              <div className="form-group">
                <label htmlFor="name">Name</label>
                <input
                  type="text"
                  className="form-control"
                  id="name"
                  placeholder="Name"
                  ref={name => (this.inputName = name)}
                />
              </div>
              <div className="form-group">
                <label htmlFor="emai1">Email</label>
                <input
                  type="email"
                  className="form-control"
                  id="email"
                  placeholder="Email"
                  ref={email => (this.inputEmail = email)}
                />
              </div>
              <div className="form-group">
                <label htmlFor="city">City</label>
                <select
                  className="form-control"
                  id="city"
                  ref={city => (this.inputCity = city)}
                >
                  <option value="India">India</option>
                  <option value="USA">USA</option>
                  <option value="UK">UK</option>
                  <option value="Japan">Japan</option>
                  <option value="Germany">Germany</option>
                </select>
              </div>
              <div className="form-group">
                <label htmlFor="age">Age</label>
                <input
                  type="number"
                  className="form-control"
                  id="age"
                  placeholder="Age"
                  ref={age => (this.inputAge = age)}
                />
              </div>
              <button type="submit" className="btn btn-primary">
                Send
              </button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {};
};

const mapDispatchToProps = dispatch => {
  return {
    createUser: user => dispatch(createUser)
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserForm);

Answer 1

由于 setState 是异步的，您可以在回调中访问已更改的状态，您可以将回调作为第二个参数传递给 setState 方法。请阅读更多关于 setState

  submitMessage = e => {
    e.preventDefault();
    const params = {
      name: this.inputName.value,
      email: this.inputEmail.value,
      city: this.inputCity.value,
      age: this.inputAge.value
    };
    this.setState({ form: params }, () => {
      console.log(params);
      console.log("-----------");
      console.log(this.state);
      this.props.createUser(this.state);
    });
  };

Answer 2

您在 setState 完成之前调用 createUser。为什么还要使用状态？我会建议：

submitMessage = e => {
    e.preventDefault();
    const params = {
      name: this.inputName.value,
      email: this.inputEmail.value,
      city: this.inputCity.value,
      age: this.inputAge.value
    };
    this.props.createUser(params);
  };

Answer 3

你错过了两件事，

设置状态本质上是异步的，所以在设置状态之后，您必须使用回调来访问它。
您没有传递表单数据，即。 createUser

解决方案：

import React, { Component } from "react";
import { connect } from "react-redux";
import { createUser } from "../store/actions/userActions";

class UserForm extends Component {
  constructor(props) {
    super(props);
    this.state = { form: [], alert: false, alertData: {} };
    this.submitMessage = this.submitMessage.bind(this);
  }

  submitMessage = e => {
    e.preventDefault();

    const params = {
      name: this.inputName.value,
      email: this.inputEmail.value,
      city: this.inputCity.value,
      age: this.inputAge.value
    };
    this.setState({ form: params },()=>{
     this.props.createUser(this.state);
    });
  };

  render() {
    return (
      <div className="container">
        <div
          className="row"
        >
          User
        </div>
        <div className="container" style={{ padding: `10px 0px` }} />

        <div className="row">
          <div className="col-sm-4">
            <h2>Contact Form</h2>
            <form onSubmit={this.submitMessage} ref="contactForm">
              <div className="form-group">
                <label htmlFor="name">Name</label>
                <input
                  type="text"
                  className="form-control"
                  id="name"
                  placeholder="Name"
                  ref={name => (this.inputName = name)}
                />
              </div>
              <div className="form-group">
                <label htmlFor="emai1">Email</label>
                <input
                  type="email"
                  className="form-control"
                  id="email"
                  placeholder="Email"
                  ref={email => (this.inputEmail = email)}
                />
              </div>
              <div className="form-group">
                <label htmlFor="city">City</label>
                <select
                  className="form-control"
                  id="city"
                  ref={city => (this.inputCity = city)}
                >
                  <option value="India">India</option>
                  <option value="USA">USA</option>
                  <option value="UK">UK</option>
                  <option value="Japan">Japan</option>
                  <option value="Germany">Germany</option>
                </select>
              </div>
              <div className="form-group">
                <label htmlFor="age">Age</label>
                <input
                  type="number"
                  className="form-control"
                  id="age"
                  placeholder="Age"
                  ref={age => (this.inputAge = age)}
                />
              </div>
              <button type="submit" className="btn btn-primary">
                Send
              </button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {};
};

const mapDispatchToProps = dispatch => {
  return {
    createUser: user => dispatch(createUser(user))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserForm);

setState 后无法获取表单数据

Unable to get form data after setState

javascript

console.log

reactjs

react-redux