React组件重渲染时调用API的生命周期方法及Header登录数据获取问题

首先，咱们得揪出问题的根源——componentDidMount只会在组件首次挂载完成时执行一次。

你想啊，用户刚打开页面时，Header组件就已经完成挂载了，这时候auth.isLoggedIn还是false，所以那两个API调用的代码压根没机会运行。等用户登录成功，auth.isLoggedIn变成true，但组件早就挂载过了，componentDidMount不会再触发，自然就没法调用API更新Header菜单项。

类组件的修复方案 #

方案1：新增componentDidUpdate监听状态变化 #

在你的Header组件里添加这个生命周期方法，专门监听auth.isLoggedIn的状态切换，当它从false变成true时，立刻调用API：

componentDidUpdate(prevProps) {
  // 只在登录状态从"未登录"变为"已登录"时触发API
  if (!prevProps.auth.isLoggedIn && this.props.auth.isLoggedIn) {
    this.props.actions.getAssessmentRequest();
    this.props.actions.getFirstSubsectionRequest();
  }
}

方案2：结合componentDidMount和componentDidUpdate #

保留你原来componentDidMount里的逻辑（处理页面加载时就已登录的场景），再加上componentDidUpdate的判断，覆盖"首次登录状态变化"的场景：

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

componentDidUpdate(prevProps) {
  const { auth, actions } = this.props;
  // 登录状态切换时触发API
  if (!prevProps.auth.isLoggedIn && auth.isLoggedIn) {
    actions.getAssessmentRequest();
    actions.getFirstSubsectionRequest();
  }
}

额外小提示 #

如果之后打算迁移到函数组件，用useEffect钩子就能更简洁地实现相同逻辑，把auth.isLoggedIn放进依赖数组，状态一变就自动执行：

useEffect(() => {
  if (auth.isLoggedIn) {
    actions.getAssessmentRequest();
    actions.getFirstSubsectionRequest();
  }
}, [auth.isLoggedIn, actions]);

这样不管是页面加载时已登录，还是首次登录成功，API都会被正确调用，Header菜单项也能正常更新啦。

内容的提问来源于stack exchange，提问作者user3574492