React子组件需等待API请求完成后再校验Props问题求助

咱们先理清问题根源：你在componentWillMount里触发API请求后立刻校验props，但API请求是异步的，这时候Redux还没更新状态，所以this.props.person和this.props.notFound自然是undefined。而且componentWillMount已经被React官方废弃了，不建议继续使用。下面给你一步步的解决方案：

1. 替换废弃的生命周期钩子 #

把componentWillMount换成componentDidMount，这个钩子是在组件挂载后执行，更适合发起异步请求：

componentDidMount() {
  this.props.init(parseInt(this.props.id, 16), this.props.accessToken);
}

2. 监听状态变化，在请求完成后校验Props #

API请求完成后，Redux的状态会更新，子组件会接收到新的props。我们需要在componentDidUpdate里监听请求状态的变化，当请求完成后再进行校验：

首先，确保你的mapStateToProps里包含请求状态和notFound（假设notFound存在于state.tagAssignment下）：

export const mapStateToProps = state => ({
  status: state.tagAssignment.status,
  person: state.entities.persons[state.tagAssignment.assignee],
  accessToken: state.auth.accessToken,
  notFound: state.tagAssignment.notFound, // 加上这个，确保能拿到notFound状态
});

然后添加componentDidUpdate钩子：

componentDidUpdate(prevProps) {
  // 当请求状态变化，且当前请求已完成（这里的status值请根据你的实际action定义调整，比如'success'/'failed'）
  if (prevProps.status !== this.props.status && this.props.status === 'fulfilled') {
    // 现在props已经更新，可以进行校验了
    if (!this.props.notFound && !this.props.person) {
      this.props.onNotValidId();
    }
  }
}

3. 修复父组件的Props传递问题 #

看你的父组件代码，render里给Child传递的是value={this.state.value}，但子组件里用的是this.props.id，这明显是个笔误，应该改成：

render() {
  return <Child id={this.state.id} onNotValidId={() => this.renderNewComponent()} />;
}

不然子组件拿不到正确的id，API请求肯定会出问题。

4. 额外优化：避免重复触发请求 #

如果父组件的id可能变化，你还需要在componentDidUpdate里监听id的变化，当id改变时重新发起请求：

componentDidUpdate(prevProps) {
  // 当id变化时，重新发起请求
  if (prevProps.id !== this.props.id) {
    this.props.init(parseInt(this.props.id, 16), this.props.accessToken);
  }

  // 原有的请求完成校验逻辑
  if (prevProps.status !== this.props.status && this.props.status === 'fulfilled') {
    if (!this.props.notFound && !this.props.person) {
      this.props.onNotValidId();
    }
  }
}

核心思路总结 #

• 异步操作别在componentWillMount里做，用componentDidMount替代
• 异步请求完成前，子组件的props还没更新，所以要等Redux状态更新后（通过componentDidUpdate监听）再做校验
• 确保父组件传递正确的props，子组件的mapStateToProps包含所有需要的状态字段

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