javascript - 如果 API 响应太快，React componentWillReceiveProps 检查不起作用

Question

我有一个 React 容器组件，它在页面加载时分派(dispatch)一个操作(使用 componentDidMount 生命周期方法)。该操作调用 API，成功的 API 调用会导致数据通过 reducer 添加到我的 Redux 存储中。

我有一些其他 API 需要来自初始 API 调用响应的数据。我在 componentWillReceiveProps 生命周期方法中有这些，我正在将 this.props 与 nextProps 进行比较，以确定我是否准备好调用数据API 的。

90% 的时间这段代码都有效，componentWillReceiveProps 中的 API 调用被成功调用，但另外 10% 的 API 没有被调用，因为 if 语句中的代码比较 this.props 和 nextProps 不执行。

从测试中我想我已经找到了问题...如果初始 API 调用返回得足够快，则第一次 componentWillReceiveProps 被调用 this.props 是已经填充了来自 API 调用的数据，而不是返回我的初始状态，此时 if 语句不执行。

防弹的最佳方法是什么？

<Route
  path={'Content/:id'}
  component={DrillPage}
/>

class DrillPage extends Component {
  componentDidMount() {
    this.props.actions.getLoggedInUser();
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props);
    console.log(nextProps);

    // Don't fire if user isn't logged in
    if (this.props.loggedInUser.id !== nextProps.loggedInUser.id) {
      this.props.actions.isFavourite(this.props.content.id, this.props.content.type);
      this.props.actions.doIFollow([this.props.content.author.id]);
    }
  }
}

function mapStateToProps(state, ownProps) {
  return {
    contentId: ownProps.params.id,
    loggedInUser: state.loggedInUser,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Object.assign({}, contentActions, userActions), dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(DrillPage);

Answer 1

也许您可以尝试一种不使用 React 生命周期的解决方案，并在您的 sagas 中处理您的逻辑，因为据我所知，您正在使用 componentWillReceiveProps 来触发其他 API 调用仅当您有 userId

时