React类组件中如何将GET请求结果作为Props传递？

核心问题 #

你的Form组件（C1）在首次渲染时，异步请求还未完成，传给C2的number是初始的空值，导致C2拿到无效数据。类组件里不用改组件类型，通过条件渲染或默认值处理就能解决。

具体解决方案 #

1. 修正状态类型与初始值（推荐）

如果接口返回的是数字，把State里number的类型改成number | null，初始值设为null（明确表示未加载完成），避免类型不匹配：

interface State {
  number: number | null;
}

export class Form extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      number: null,
    };
  }
}

2. 优化异步请求写法（提升可读性）

async/await和.then混用容易混乱，统一用try/catch处理错误：

async componentDidMount() {
  try {
    const response = await fetch.get(config.api.uri.getNumber(params));
    this.setState({ number: response.data });
  } catch (error) {
    catchError(error);
  }
}

3. 给C2添加条件渲染或默认值

在render阶段根据状态判断，避免给C2传无效值：

• 方式一：请求完成前显示加载状态

render(): ReactElement {
  const { number } = this.state;
  
  if (number === null) {
    return <div>加载中...</div>; // 可替换成骨架屏或加载动画
  }
  
  return <Component number={number} />;
}

• 方式二：给C2传默认值，让C2自行处理

render(): ReactElement {
  const { number } = this.state;
  
  // 若number未加载完成，传默认值0（根据业务需求调整）
  return <Component number={number ?? 0} />;
}

4. 让C2自身处理空值（可选）

如果能修改C2组件，在C2内部判断props有效性：

// C2组件示例
export const Component = ({ number }: { number: number | null }) => {
  if (number === null) {
    return <span>暂无数据</span>;
  }
  return <span>数字：{number}</span>;
};

总结 #

核心逻辑就是在异步请求完成前，要么先显示加载状态不渲染C2，要么给C2传合理的默认值，避免C2拿到无效数据报错。类组件里componentDidMount是正确的请求时机，只要在render阶段根据状态做好渲染判断即可。

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