React Native中API调用触发Invalid hook call错误求助

错误核心原因 #

你在类组件里使用了useState、useEffect这类React Hook，这完全违反了Hook的规则——Hook只能在函数组件或自定义Hook的顶层调用，类组件不支持任何Hook，这就是触发Invalid hook call错误的直接原因。

另外你的代码还有几个逻辑问题：

• 试图在componentDidMount的异步回调里调用useEffect，本身就不符合Hook调用要求
• 类组件的state初始化依赖外部的requestBody，但requestBody里的CompanyIdFromApi是Hook状态，类组件根本无法访问
• 获取companyId和原有接口调用的逻辑顺序混乱

修复方案一：改成函数组件（推荐） #

把类组件重构为函数组件，用Hook来管理状态和生命周期：

import React, { useState, useEffect } from 'react';
import companyApi from 'qs-data-manager/Company';
import { network, ENTITY_TYPE } from './你的依赖路径'; // 补全实际依赖路径

const CompanyJewelleryPriceSettings = () => {
  // 初始化组件状态
  const [entityId, setEntityId] = useState('');
  const [entityType, setEntityType] = useState(ENTITY_TYPE.COMPANY);
  const [jewelleryPriceDisplayStatus, setJewelleryPriceDisplayStatus] = useState({});

  // 封装获取companyId的异步逻辑
  const getCompanyIdFromApi = async () => {
    const companyId = await companyApi.getCompanyId();
    setEntityId(companyId);
  };

  // 组件挂载时执行完整数据获取流程
  useEffect(() => {
    const fetchAllData = async () => {
      // 第一步：先获取companyId
      await getCompanyIdFromApi();
      // 第二步：用拿到的companyId调用价格设置接口
      const data = await network.getJewelleryPriceSettings({
        entityId,
        entityType
      });
      // 处理接口返回数据，更新状态
      setJewelleryPriceDisplayStatus(data);
    };

    fetchAllData();
  }, []);

  return (
    // 组件JSX内容
    <View>
      {/* ... */}
    </View>
  );
};

export default CompanyJewelleryPriceSettings;

修复方案二：保持类组件，用类的生命周期实现 #

如果不想重构为函数组件，就用类组件的state和生命周期方法处理异步逻辑：

import React, { Component } from 'react';
import companyApi from 'qs-data-manager/Company';
import { network, ENTITY_TYPE } from './你的依赖路径'; // 补全实际依赖路径

class CompanyJewelleryPriceSettings extends Component {
  state = {
    entityId: '', // 初始为空，后续通过接口更新
    entityType: ENTITY_TYPE.COMPANY,
    jewelleryPriceDisplayStatus: {},
  };

  // 获取companyId并更新state，完成后调用价格设置接口
  getCompanyIdFromApi = async () => {
    const companyId = await companyApi.getCompanyId();
    this.setState({ entityId: companyId }, () => {
      // setState是异步操作，回调里才能拿到最新的state
      this.fetchJewelleryPriceSettings();
    });
  };

  // 调用价格设置接口
  fetchJewelleryPriceSettings = async () => {
    const { entityId, entityType } = this.state;
    const data = await network.getJewelleryPriceSettings({
      entityId,
      entityType,
    });
    this.setState({ jewelleryPriceDisplayStatus: data });
  };

  // 组件挂载时启动数据流程
  componentDidMount() {
    this.getCompanyIdFromApi();
  }

  render() {
    // 组件渲染逻辑
    return (
      <View>
        {/* ... */}
      </View>
    );
  }
}

export default CompanyJewelleryPriceSettings;

关键注意点 #

• 类组件永远不能使用Hook；函数组件只能在顶层调用Hook，不能在循环、条件、异步回调里调用
• 异步操作要注意顺序：必须等companyId获取完成后，再用它调用后续接口，避免使用未初始化的空值
• 类组件中setState是异步操作，若要基于新state执行后续逻辑，必须放在setState的回调函数中

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