React组件中this.value已赋值却仍为null的问题排查

你遇到的核心问题是异步操作的执行顺序不匹配，咱们来拆解一下：

当componentDidMount执行时，你先后调用了fetchValueFromServer和fetchSecondValueFromServer，但fetch_value_from_server是异步请求——它的then回调并不会立刻执行，而是要等服务器返回数据后，才会在后续的事件循环里给this.value赋值。但fetchSecondValueFromServer是紧接着同步执行的，这时候this.value还是你初始化的null，自然触发不了后续的console.log。

下面给你几种可行的解决办法：

方法1：链式调用Promise #

让第二个请求等待第一个请求完成后再执行，只需要把fetchSecondValueFromServer放在第一个请求的then回调里，同时让fetchValueFromServer返回Promise：

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = { key : 10 };
    this.value = null;
  }
  componentDidMount() {
    // 等待第一个请求完成后再执行第二个
    this.fetchValueFromServer().then(() => {
      this.fetchSecondValueFromServer();
    });
  }
  fetchValueFromServer() {
    // 返回Promise，让外部可以链式调用
    return fetch_value_from_server(this.state.key).then( (value) => {
      this.value = value;
    });
  }
  fetchSecondValueFromServer() {
    is_ready(this.value).then(() => {
      console.log("there");
    });
  }
}

方法2：使用async/await简化代码 #

async/await是Promise的语法糖，能让异步代码看起来像同步代码，可读性更强：

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = { key : 10 };
    this.value = null;
  }
  async componentDidMount() {
    // 等待第一个请求完成
    await this.fetchValueFromServer();
    // 再执行第二个请求
    this.fetchSecondValueFromServer();
  }
  async fetchValueFromServer() {
    const value = await fetch_value_from_server(this.state.key);
    this.value = value;
  }
  fetchSecondValueFromServer() {
    is_ready(this.value).then(() => {
      console.log("there");
    });
  }
}

额外建议：遵循React状态管理规范 #

在React组件里，像this.value这种实例属性不会触发组件重新渲染，如果这个值后续需要参与渲染或者依赖它的状态更新，更推荐把它放到state里，用setState来更新：

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = { key : 10, value: null };
  }
  async componentDidMount() {
    await this.fetchValueFromServer();
  }
  async fetchValueFromServer() {
    const value = await fetch_value_from_server(this.state.key);
    // setState是异步的，用回调确保value更新后再执行后续操作
    this.setState({ value }, () => {
      this.fetchSecondValueFromServer();
    });
  }
  fetchSecondValueFromServer() {
    is_ready(this.state.value).then(() => {
      console.log("there");
    });
  }
}

这样既保证了异步操作的顺序，也符合React的设计模式，后续维护起来更省心。

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