javascript - ReactJS中如何处理两个setState方法依次执行？

Question

我有以下handleSubmit方法，它设置状态并有一个回调函数来分派(dispatch)操作。

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

我想在分派(dispatch)操作后将所有状态属性设置为空。如果我在上面的handleSubmit方法中再次调用setState，我会遇到一些问题，主要是因为异步行为或setState。

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

我是 ReactJS 和 JS 的新手。我该如何处理这个问题？有没有办法传递另一个回调方法？或者有其他方式吗？

Answer 1

首先，Jayce444's point值得注意的是。设置状态的原因是为了更新组件显示的内容。在完全清除乘客信息之前，您将非常简短地显示航类号。因此，我要么不理会第一个 setState，要么让第二个等待操作完成完成(这意味着 dispatch 将需要返回 promise 或接受回调)。等待操作完成还有另一个原因:操作可能会失败。清除乘客信息然后操作失败不太可能是理想的情况......:-)

但是回答这个问题:

I want to set all the state properties to empty after dispatching the action.

在您的尝试中，您在调用 setState 后立即调用 setState，而不等待操作被分派(dispatch)。相反，在分派(dispatch)操作后，在前一个 setState 的完成回调中调用 setState:

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

如果调度可能失败，请确保仅在成功时调用setState来清除字段。

<小时/>

旁注:如果第二次调用的目标是清除所有乘客字段，则不需要展开之前的乘客对象，也不需要 setState 的回调形式>:

this.setState({
  passenger: {
    flightNumber: "",
    firstName: "",
    lastName: "",
    address: "",
    dob: "",
    passportNumber: ""
  }
});

<小时/>

旁注 2:重复这样的字段名称很容易出错，您可能需要使用类来代替:

class Passenger {
    constructor() {
        this.flightNumber = "";
        this.firstName = "";
        this.lastName = "";
        this.address = "";
        this.dob = "";
        this.passportNumber = "";
    }
}

然后:

this.setState({passenger: new Passenger()});