javascript - 我在分派(dispatch)操作之前使用 setState 设置属性，但在分派(dispatch)时的 redux 操作中未设置该属性

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 存储中仍然显示为空(分派(dispatch)操作后，操作中收到的对象将包含 FlightNumber 属性的空值)。

请帮忙。我是 ReactJS 和 JS 的新手。

Answer 1

原因可能是:

it will still show as empty in the Redux store

1) 您正在使用 this.setState 来设置状态，这会设置组件的本地状态，而不是 Redux 中的全局状态。

2) 您立即尝试获取 flightNumber 但它不会设置，因为 setState 是异步调用。

1) 的解决方案:

更改 redux 存储中状态的唯一方法是使用您想要更改的数据调度一个操作。例如:

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

在 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) 传递给您的 reducer 函数。

2) 在您的商店中存在名为 flightNumber 的状态。