Javascript 在分派操作之前，我使用setState设置属性，但在分派时的redux操作中未设置该属性

我有一个类组件，如下所示

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

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除外，它将取自url参数“this.props.match.params.flightNumber”。表格的可处理提交内容如下：

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

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。

因为setState是异步的，所以使用setState的回调语法

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

---

原因可能是：

它在Redux存储中仍将显示为空

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})
}

在减速器中：

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

的状态。

您是否从

handleSubmit

中的

此.props.match.params.flightNumber

获取flightNumber？是@ZainUlAbideen@ZainUlAbideen，使用控制台日志语句编辑问题您将不会在第二个控制台中获得结果，因为

setState

是异步调用。flightNumber在您的状态中不存在，而是在乘客状态中存在。更新了我的答案。flightNumber仍在操作对象中