Javascript 组件重新呈现时进行API调用的React生命周期方法

我有一个名为

的组件，其中我有一个登录表单，可以调用API来登录用户

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

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

我遇到的问题是，用户第一次登录上述

componentDidMount

函数时不会触发，因为页眉组件在第一次加载页面时已装入

我曾尝试使用

componentdiddupdate

和

componentWillReceiveProps

，但它们被触发多次，我收到请求超时错误

---

有什么想法我可以使用哪个生命周期方法来实现这一点吗？

是的，您走的是正确的道路，您应该使用

组件WillReceiveProps

生命周期方法。为了防止无限循环和不断发出请求，您必须执行一项检查，以测试您关心的道具是否实际发生了变化：

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

---

是的，您走的是正确的道路，您应该使用

组件willreceiveprops

生命周期方法。为了防止无限循环和不断发出请求，您必须执行一项检查，以测试您关心的道具是否实际发生了变化：

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

---

我不能告诉你为什么它被多次调用，但我可以告诉你，这不重要。问题是你没有比较道具的变化。如果执行此操作，代码将按照您希望的方式运行：

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

另请参见官方文件，其中说明：

---

希望这能有所帮助。

我无法告诉您为什么会多次调用它，但我可以告诉您，这不重要。问题是你没有比较道具的变化。如果执行此操作，代码将按照您希望的方式运行：

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

另请参见官方文件，其中说明：

---

希望这有帮助。

您应该使用

componentdiddupdate（prevProp，prevState）

并更新

if

语句，以比较当前

道具
auth.isLoggedIn
与以前的
道具
@Hoyen您的评论不完整。他的API获取数据，这表明他将获得新数据。如果他在componentDidUpdate中获取数据；然后，他会重新渲染。是一个更好的解决方案。您应该使用
componentdiddupdate（prevProp，prevState）
并更新
if
语句，以比较当前
道具
auth.isLoggedIn
与以前的
道具
@Hoyen您的评论不完整。他的API获取数据，这表明他将获得新数据。如果他在componentDidUpdate中获取数据；然后，他会重新渲染。是一个更好的解决方案。我需要更多地了解登录如何工作。是在更新状态吗？还是在更新道具？我在这里假设它正在更新道具。是的，
nextrops
的检查是我错过的。这很有效。谢谢，当它让我接受的时候。登录更新propsI需要了解更多关于登录如何工作的信息。是在更新状态吗？还是在更新道具？我在这里假设它正在更新道具。是的，
nextrops
的检查是我错过的。这很有效。谢谢，当它让我接受的时候。登录将更新道具