React组件中异步获取Observable类型redirectUrl后，如何正确修改window.location.href？

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

你的代码逻辑里，componentWillMount是同步生命周期钩子，里面的async/await会让这个钩子先返回一个Promise，组件会优先执行第一次render——这时候redirectUrl还是null，所以跳转逻辑根本没触发。等异步的getRedirectUrl()拿到结果后，虽然redirectUrl是Observable类型，但如果你的组件没有用@observer装饰器，MobX无法追踪到这个状态变化，也就不会触发组件重新渲染，跳转逻辑自然永远不会执行。另外还要提一句：componentWillMount已经被React标记为不安全的生命周期钩子，官方推荐用componentDidMount替代。

下面给你几个可行的解决方案：

方案一：用MobX的reaction处理副作用（推荐） #

把跳转这种副作用从render里抽离出来，用MobX的reaction监听redirectUrl的变化，这样既符合React"render是纯函数"的原则，也能保证状态变化时触发跳转：

import { observer, reaction } from "mobx-react";

@observer // 必须加这个！让MobX能追踪组件内的Observable状态
class YourRedirectComponent extends React.Component {
  @observable private redirectUrl: string = null;

  componentDidMount() {
    // 把异步逻辑放在componentDidMount里
    this.fetchRedirectUrl();
    
    // 用reaction监听redirectUrl的变化，触发跳转
    reaction(
      () => this.redirectUrl,
      (targetUrl) => {
        if (targetUrl) {
          window.location.href = targetUrl;
        }
      }
    );
  }

  private async fetchRedirectUrl() {
    this.redirectUrl = await this.getRedirectUrl();
  }

  render() {
    // 这里可以显示加载状态，比如"正在跳转..."
    return <div>Redirecting...</div>;
  }
}

方案二：在render中处理（简化版） #

如果不想引入reaction，也可以直接在render里处理，但必须确保组件加了@observer，同时用setTimeout延迟跳转，避免React渲染周期警告：

import { observer } from "mobx-react";

@observer
class YourRedirectComponent extends React.Component {
  @observable private redirectUrl: string = null;

  async componentDidMount() {
    this.redirectUrl = await this.getRedirectUrl();
  }

  render() {
    if (this.redirectUrl) {
      // 延迟跳转，让React完成当前渲染周期
      setTimeout(() => {
        window.location.href = this.redirectUrl;
      }, 0);
      return <div>Redirecting...</div>;
    }
    return <div>Loading...</div>;
  }
}

额外注意点 #

1. 必须加@observer：这是MobX组件能响应Observable状态变化的核心，漏掉这个就会出现状态更新但组件不重新渲染的问题。
2. 远离componentWillMount：这个钩子在服务端渲染中可能被多次调用，而且React官方已经不推荐使用，换成componentDidMount更安全。
3. 避免在render里执行副作用：render的职责应该是根据状态返回JSX，跳转、请求这类副作用放在生命周期钩子或MobX的reaction/autorun里更合理。

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