React项目调用API复用函数时触发Invalid hook call错误求助

嘿，我来帮你搞定这个报错问题！你遇到的这个错误完全是因为违反了React Hooks的使用规则——你现在把useState和useEffect放在了普通函数里，直接调用这个函数肯定会触发报错，因为Hooks有严格的使用限制：只能在函数组件的顶层代码中调用，或者在名字以use开头的自定义Hook里调用。

下面给你两种靠谱的解决方案，你可以根据自己的需求选：

方案一：把复用函数改成自定义Hook #

这是最符合React设计思路的做法，只需要把函数名改成以use开头（React靠这个识别自定义Hook），然后返回需要的状态就行：

// 建议把文件名改成 useFetchCustomers.jsx
import { useState, useEffect } from 'react';
import axios from 'axios';

export default function useFetchCustomers() {
  const [customers, setCustomers] = useState([]);
  const [loading, setLoading] = useState(true); // 新增加载状态，提升用户体验
  const [error, setError] = useState(null); // 新增错误状态，方便处理异常

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await axios.get('customers/', {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('access_token')}`
          }
        });
        setCustomers(response.data);
        setError(null);
      } catch (error) {
        console.error('获取客户数据失败:', error);
        setError(error.message);
        setCustomers([]);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // 空依赖数组表示仅在组件挂载时执行一次

  // 返回状态，供组件使用
  return { customers, loading, error };
}

然后在你的组件里这样用：

import useFetchCustomers from './useFetchCustomers';

function CustomerList() {
  const { customers, loading, error } = useFetchCustomers();

  // 根据状态渲染不同内容
  if (loading) return <div>正在加载客户数据...</div>;
  if (error) return <div>加载出错啦：{error}</div>;

  return (
    <ul>
      {customers.map(customer => (
        <li key={customer.id}>{customer.name}</li>
      ))}
    </ul>
  );
}

方案二：把函数改成纯异步请求函数（不含Hooks） #

如果你不想用自定义Hook，也可以把这个函数改成只负责发请求的纯异步函数，把状态管理的逻辑移到组件里：

// fetchCustomers.jsx 作为纯请求函数
import axios from 'axios';

export default async function fetchCustomers() {
  try {
    const response = await axios.get('customers/', {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('access_token')}`
      }
    });
    return response.data;
  } catch (error) {
    console.error('获取客户数据失败:', error);
    throw error; // 抛出错误，让组件自己处理异常
  }
}

然后在组件里通过useEffect调用这个函数，自己管理状态：

import { useState, useEffect } from 'react';
import fetchCustomers from './fetchCustomers';

function CustomerList() {
  const [customers, setCustomers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const getCustomersData = async () => {
      try {
        const customerData = await fetchCustomers();
        setCustomers(customerData);
        setError(null);
      } catch (error) {
        setError(error.message);
        setCustomers([]);
      } finally {
        setLoading(false);
      }
    };

    getCustomersData();
  }, []);

  // 同样根据状态渲染内容
  if (loading) return <div>正在加载...</div>;
  if (error) return <div>出错了：{error}</div>;

  return (
    <ul>
      {customers.map(customer => (
        <li key={customer.id}>{customer.name}</li>
      ))}
    </ul>
  );
}

总结一下，核心问题就是你之前的写法违反了Hooks的使用规则，只要把Hooks放到正确的位置（组件顶层或自定义Hook），就能解决这个报错啦！

备注：内容来源于stack exchange，提问作者Lucas Leone