Question

我有一个名为<Header>的组件，我有一个登录表单，可以进行API调用以记录用户。

我的标头组件中有一个函数，它会进行一些API调用以获取一些数据，并在成功登录后更新标题中的菜单项：

componentDidMount() {
        const { auth, actions, children } = this.props;;
        if (auth.isLoggedIn) {
            actions.getAssessmentRequest();
            actions.getFirstSubsectionRequest();
        }
    }

我遇到的问题是用户第一次登录上面的componentDidMount函数时没有触发，因为第一次加载页面时已经挂载了标题组件。

我尝试使用componentDidUpdate和componentWillReceiveProps但是它们被多次触发，我收到请求超时错误。

我可以用什么生命周期方法来实现这个目标？

Answer 1

是的，您走在正确的道路上，您应该使用componentWillReceiveProps生命周期方法。防止无限循环和不断发出请求的技巧，您必须执行检查以测试您关心的道具实际是否发生了变化：

componentDidMount() {
    this.fetchData(this.props);
}

componentWillReceiveProps(nextProps) {
    if(nextProps.auth.isLoggedIn !== this.props.auth.isLoggedIn) {
        this.fetchData(nextProps);
    }
}

fetchData(props) {
    const { auth, actions, children } = props;
    if (auth.isLoggedIn) {
        actions.getAssessmentRequest();
        actions.getFirstSubsectionRequest();
    }
}

Answer 2

我不能告诉你为什么它被多次调用，但我可以告诉你它应该没关系。问题是你没有比较道具的变化。如果您这样做，代码将按您希望的方式运行：

componentWillReceiveProps(newProps) {
  const { auth, actions, children } = newProps;
  if (auth.isLoggedIn !== this.props.auth.isLogin) {
    actions.getAssessmentRequest();
    actions.getFirstSubsectionRequest();
  }
}

另请参阅官方ReactJS文档，其中说明：https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

希望这有帮助。

React生命周期方法，用于在重新呈现组件时进行API调用

2 个答案: