Передача переменных формы создателю действия в React-Redux

Question

В приложении React-Redux я пытаюсь передать переменную формы от компонента создателю действия, не используя Redux-Form, Formic или любое другое расширение.

myForm.js

import { connect } from "react-redux";
import { fetchData } from "../actions/myActions";

class myForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      from: "",
      to: ""
    };
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

onFormSubmit(event) {
event.preventDefault();

const from = event.target.elements.from.value;
const to = event.target.elements.to.value;

this.setState({
      from: from,
      to: to
    });

    this.props.fetchData(
      this.state.from,
      this.state.to,
    );
  }

render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
            <div>
            <input
              type="text"
              name="from"
            />
          </div>
          <div>
            <input
              type="text"
              name="to"
            />
          </div>
    </form>
 </div>


    export default connect(
      null,
      { fetchData }
    )(myForm);

Я передаю создатель действия fetchData компоненту myForm и при отправке формы вызывает функцию onFormSubmit, которая передает переменные формы в fetchData следующим образом:

this.props.fetchData(
   this.state.from,
   this.state.to,
);

Затем внутри myActions.js я пытаюсь получить доступ к этим переменным формы и запустить запрос API.

myActions.js

import { FETCH_DATA } from "./types";
import axios from "axios";
const APP_KEY = <my api key>;

export const fetchData = (from,to) => async dispatch => {
  const response = await axios.get`${URL}/${from}/to/${to}?app_key=${APP_KEY}`;

  dispatch({
    type: FETCH_DATA,
    payload: response.data.journeys
  });
};

Isчто я пытаюсь правильный подход?К сожалению, кажется, что переменные от и до не передаются создателю действия в myAction.js.

Answer 1

setState является асинхронной операцией, поэтому вызывается this.props.fetchData, прежде чем состояние будет установлено.Вам необходимо использовать обратный вызов во втором аргументе setState в myForm.js , который выполняется после обновления состояния.

this.setState({
    from: from,
    to: to
}, () => {
    this.props.fetchData(this.state.from,this.state.to)
});

Надеждаэто помогает.Удачного кодирования!