React中componentWillMount如何等待API请求完成后处理props逻辑？

首先得指出你当前代码的核心问题：componentWillMount这个钩子是在组件挂载之前就执行的，这时候你的异步API请求还没跑完，notFound和person这些props自然都是undefined，这时候的条件判断完全起不到你想要的作用。而且React现在已经把componentWillMount标记为过时的钩子了，官方不推荐再用，它可能会在服务端渲染中被多次调用，还容易引发一些不可预期的副作用问题。

给你两个关键的调整方向，完美解决这个问题：

1. 把初始化请求移到正确的生命周期钩子 #

异步初始化操作应该放在componentDidMount里，这个钩子是组件挂载完成后才执行的，更适合触发API请求这类副作用：

componentDidMount = () => {
  // 组件挂载后再触发初始化API
  this.props.init(parseInt(this.props.tagId, 16), this.props.accessToken);
};

2. 监听props变化，在数据就绪后执行逻辑 #

你需要在componentDidUpdate里监听notFound和person这两个props的变化，只有当它们从undefined变成确定的true/false时，再执行onFreeTag逻辑。同时要加条件判断，避免无限循环：

componentDidUpdate = (prevProps) => {
  const { notFound, person, onFreeTag } = this.props;

  // 确保notFound和person都已经从undefined更新为确定值，且和之前的状态不同
  if (prevProps.notFound !== notFound && prevProps.person !== person) {
    // 满足条件时执行目标函数
    if (!notFound && !person) {
      onFreeTag();
    }
  }
};

额外优化：处理props动态变化的情况 #

如果你的tagId或者accessToken可能在组件生命周期中发生变化（比如父组件更新了这些值），那还要在componentDidUpdate里检查这两个props的变化，重新触发初始化请求：

componentDidUpdate = (prevProps) => {
  const { tagId, accessToken, init, notFound, person, onFreeTag } = this.props;

  // 若tagId或accessToken变化，重新调用初始化API
  if (prevProps.tagId !== tagId || prevProps.accessToken !== accessToken) {
    init(parseInt(tagId, 16), accessToken);
  }

  // 检查notFound和person是否就绪并执行逻辑
  if (prevProps.notFound !== notFound && prevProps.person !== person) {
    if (!notFound && !person) {
      onFreeTag();
    }
  }
};

边界情况处理 #

如果notFound和person可能不是同时更新的（比如一个先返回结果，另一个后返回），你可以再加一层判断，确保两个props都不是undefined再执行：

if (notFound !== undefined && person !== undefined && !notFound && !person) {
  onFreeTag();
}

这样就能确保只有当异步请求完成、props都拿到确定值之后，才会执行你想要的逻辑啦。

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