React Native类组件中如何实现Loading状态（替代useEffect）

步骤1：添加加载状态到组件state #

首先在组件的初始state中加入loading字段，初始值设为true，表示页面初始处于加载状态：

state = {
  entityId: '',
  entityType: '', // 假设你的原有state包含这个字段
  jewelleryPriceDisplayStatus: null,
  loading: true // 新增加载状态
};

步骤2：修改componentDidMount控制加载状态 #

修正你的异步逻辑，注意不要依赖setState后的this.state.entityId（因为setState是异步操作，立即访问会拿到旧值），直接使用companyId变量传参；同时在请求完成（成功或失败）后将loading设为false：

componentDidMount = async () => {
  try {
    const companyId = await companyApi.getCompanyId();
    // 直接使用companyId变量，而非this.state.entityId
    const response = await network.getJewelleryPriceSettings({
      entityId: companyId,
      entityType: this.state.entityType,
    });
    this.setState({
      entityId: companyId,
      jewelleryPriceDisplayStatus: response,
      loading: false // 加载完成，关闭加载状态
    });
  } catch (error) {
    console.log(error);
    this.setState({ loading: false }); // 出错后也需关闭加载状态
  }
};

步骤3：在render中根据加载状态渲染内容 #

在组件的render方法里，根据loading的值决定显示加载动画还是业务内容：

render() {
  const { loading, jewelleryPriceDisplayStatus } = this.state;

  // 加载状态时显示动画（这里用ActivityIndicator示例，你可以替换成自定义加载组件）
  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  // 加载完成后渲染业务内容
  return (
    <View>
      {/* 这里渲染你的jewelleryPriceDisplayStatus相关内容 */}
      <Text>价格设置：{JSON.stringify(jewelleryPriceDisplayStatus)}</Text>
    </View>
  );
}

关键注意点 #

• setState是异步操作，不要在调用setState后立即访问this.state，直接使用请求返回的变量（比如companyId）更可靠。
• 无论请求成功还是失败，都要设置loading: false，避免加载动画一直显示。

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