componentWillReceiveProps中alert多次触发求助：需单次提示并跳转

首先咱们来拆解下你遇到的问题：

你的代码在直接访问路由时正常，但从登录页导航过来时会多次弹出alert，核心原因有两个：

1. componentWillReceiveProps的触发特性：这个生命周期函数只要组件接收新的props就会触发，从登录页跳转过来时，组件可能会因为路由加载、全局状态同步等原因多次接收props更新，只要nextProps.error存在，就会重复执行alert和跳转逻辑。
2. 缺少新旧props的对比判断：你没有校验当前props的error和新props的error是否有变化——哪怕error内容完全一致，只要props发生更新，代码就会再次执行alert。

另外要提醒你：componentWillReceiveProps已经是React官方标记为不安全的生命周期函数（React 16.3+），推荐使用componentDidUpdate来替代，它能更安全地处理props更新后的逻辑。

解决方案 #

下面是两种可行的实现方式，核心思路都是只在error首次出现（或发生变化）时执行一次提示和跳转：

方式一：使用componentDidUpdate+实例标记 #

class YourComponent extends React.Component {
  // 初始化标记，记录当前错误是否已处理
  errorHandled = false;

  componentDidUpdate(prevProps) {
    // 仅当error存在、和之前的error不同、且未被处理过的时候执行逻辑
    if (this.props.error && this.props.error !== prevProps.error && !this.errorHandled) {
      alert(this.props.error);
      this.props.history.replace('/dashboard');
      this.errorHandled = true; // 标记为已处理，避免重复触发
    }

    // 当error被清除时，重置标记，确保下次错误出现时能正常触发
    if (!this.props.error && this.errorHandled) {
      this.errorHandled = false;
    }
  }

  // ...其他组件代码
}

方式二：使用组件状态管理处理标记（更符合React状态规范） #

class YourComponent extends React.Component {
  state = {
    isErrorHandled: false
  };

  // 当error发生变化时，重置处理标记
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.error !== prevProps.error) {
      return { isErrorHandled: false };
    }
    return null;
  }

  componentDidUpdate() {
    const { error, history } = this.props;
    const { isErrorHandled } = this.state;

    if (error && !isErrorHandled) {
      alert(error);
      history.replace('/dashboard');
      this.setState({ isErrorHandled: true });
    }
  }

  // ...其他组件代码
}

额外说明 #

从登录页导航过来时多次触发的本质是：页面跳转过程中，组件可能会经历多次props更新（比如路由状态同步、全局状态更新等），通过添加“是否已处理”的标记，就能确保同一错误只会触发一次提示和跳转。建议优先使用方式二，因为React更推荐通过状态来管理组件的内部状态，而非直接修改实例属性。

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