javascript - 如何从 `dispatch` 内部调用 `componentDidUpdate` 而不会陷入无限循环？

Question

我正在制作一个非常简单的 React 组件，它显示从远程源获取的数据。在获取数据之前，它必须等待用户正确登录。以下是我尝试执行此操作的方法:

class MyComponent extends React.Component {
  componentDidUpdate () {
    if (this.props.loggedIn) {
      api.getData()
        .then(() => {
          this.props.dispatch({
            type: 'gotData'
          })
        }, (reason) => {
          this.props.dispatch({
            type: 'getDataFailed'
          })
        })
    }
  }
}

用我自己的话说，每次更新与该组件相关的部分状态(在本例中为 loggedIn 属性)，都会调用 componentDidUpdate 并且我如果我看到用户已登录，就可以获取数据。

这实际上工作得很好，除了一个主要问题:调用 dispatch 似乎最终会再次触发 componentDidUpdate，所以我最终陷入了无限循环。我什至不必在任何地方监听这些调度事件，使用 dispatch 函数的简单事实就足以再次触发 componentDidUpdate。

我的猜测是，dispatch 执行我的根 reducer ，它内部使用 setState，从而再次触发整个 update 生命周期链。

这种事情通常是怎么做的？如何从 componentDidUpdate 中调用 dispatch 而不会陷入无限循环？

Answer 1

解决此问题的一个简单方法是添加一个附加标志，例如 loggingIn，您可以在异步操作之前设置(通过分派(dispatch))该标志，并在异步操作之后重置。您还需要跟踪登录失败的时间，以区分这种情况与登录过程未启动的情况(除非您想在失败时自动重新启动该过程):

class MyComponent extends React.Component {
  componentDidUpdate () {
    const { loggedIn, loggingIn, loginFailed, dispatch } = this.props;
    if (!loggingIn && !loggedIn && ! loginFailed) {
      dispatch({
        type: 'gettingData' // this one sets loggingIn to true, loggedIn to false, loginFailed to false
      });
      api.getData()
        .then(() => {
          dispatch({
            type: 'gotData' // this one sets loggingIn to false, loggedIn to true, loginFailed to false
          })
        }, (reason) => {
          dispatch({
            type: 'getDataFailed' // this one sets loggingIn to false, loggedIn to false, loginFailed to true
          })
        })
    }
  }
}

如果您不想在 redux 中设置此状态，您也可以让此控件存在于组件本身中:

class MyComponent extends React.Component {
  componentDidUpdate () {
    const { loggedIn, dispatch } = this.props;
    const { loggingIn, loginFailed } = this.state;

    if (!loggingIn && !loggedIn && !loginFailed) {
      this.setState({
        loggingIn: true
      })
      api.getData()
        .then(() => {
          this.setState({
            loggingIn: false,
            loginFailed: false
          });
          dispatch({
            type: 'gotData'
          })
        }, (reason) => {
          this.setState({
            loggingIn: false,
            loginFailed: true
          });
          dispatch({
            type: 'getDataFailed'
          })
        })
    }
  }
}

您可以使用 loggingIn 标志向用户显示旋转图标，或使用 loginFailed 标志显示消息(如果适合您的用户体验)。