Я устанавливаю свойство с помощью setState перед отправкой действия, но свойство не устанавливается в избыточном действии при отправке

Question

У меня есть компонент класса следующим образом:

  class PassengerAddPage extends React.Component {
  state = {
    passenger: {
      flightNumber: "",
      firstName: "",
      lastName: "",
      address: "",
      dob: "",
      passportNumber: ""
    }
  };

Я заполню все поля из данных формы, которые вводит пользователь, кроме flightNumber, который будет взят из параметра url "this.props.match .params.flightNumber». HandleSubmit для формы выглядит следующим образом:

handleSubmit = event => {
    event.preventDefault();
    console.log(this.props.match.params.flightNumber); //prints AH001
    this.setState(
      {
        ...this.state,
        flightNumber: this.props.match.params.flightNumber
      },
      () => console.log(this.state.passenger) //prints empty
    ); 
    this.props.dispatch(passengerActions.addPassenger(this.state.passenger));
}

Несмотря на то, что я установил flightNumber, он все равно будет отображаться как пустой в хранилище Redux (после отправки действия объект, полученный в действии, будет содержать пустое значение для собственности flightNumber).

Пожалуйста, помогите. Я новичок в ReactJS и JS.

Answer 1

Причины могут быть следующими:

в магазине Redux он по-прежнему будет отображаться как пустой

1) Вы используете this.setState для установки состояния, которое устанавливает локальное состояние компонента, а не глобальное состояние в Redux.

2) Вы немедленно пытаетесь получить flightNumber, но он не будет установлен, поскольку setState является асинхронным c звонок.

Решение для 1):

Единственный способ изменить состояние в резервном хранилище - отправить действие с данными, которые вы хотите изменить. Например:

handleSubmit = event => {
event.preventDefault();
this.props.dispatch({type: CHANGE_FLIGHT_NUMBER, flightNumber: flightNumber: this.props.match.params.flightNumber})
}

In Reducer:

case CHANGE_FLIGHT_NUMBER:
     return {...state, flightNumber: action.flightNumber}

Решение для 2):

Передать обратный вызов на setState:

this.setState(
  {
    passenger: {...this.state.passenger, flightNumber: this.props.match.params.flightNumber}
  },
  () => {
     console.log(this.state.passenger)
  }
)

Допущения, сделанные при написании этого ответа:

1) Вы передаете состояние как (state = initialState, action) функции редуктора.

2) В вашем магазине есть состояние, называемое flightNumber существует.

Answer 2

Поскольку setState является асин c, используйте синтаксис обратного вызова setState

    handleSubmit = event => {
        event.preventDefault();
        this.setState({
          ...this.state,
          flightNumber: this.props.match.params.flightNumber
        },
       ()=>
       {               
         this.props.dispatch(passengerActions.addPassenger(this.state.passenger));
       });
    }