Невозможно получить данные формы после setState - PullRequest
Новая
       6

Невозможно получить данные формы после setState

0 голосов
/ 12 ноября 2018

Я пытаюсь отправить данные формы после отправки в базу данных firebase, используя redux в моем приложении реагирования, но я не могу отправить состояние, поэтому я попытался отследить данные формы с помощью console.log, но данные формы пустой. Я могу консоль журнала 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);

Ответы [ 3 ]

0 голосов
/ 12 ноября 2018

Вы вызываете createUser до завершения setState. Зачем вообще использовать государство? Я бы предложил: 

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);
  };
0 голосов
/ 12 ноября 2018

Там вам не хватает двух вещей,

  1. Заданное состояние является асинхронным по своей природе, поэтому после заданного состояния вы должны использовать обратный вызов для доступа к нему.

  2. Вы не передаете данные формы, т.е. Параметры 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);
0 голосов
/ 12 ноября 2018

Поскольку 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);
    });
  };
...