Question

我在React应用程序中使用firebase提交到redux数据库后尝试发送表单数据，但是我无法发送状态，因此我尝试通过{{1}跟踪表单数据}，但表单数据为空。我可以控制台日志console.log，但不能控制台params

下面是代码。

我正在此应用中使用this.state。 redux是我的行动

createUser

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之后无法获取表单数据

3 个答案: