ReactJS：如何在不同组件复用同一API请求Hook（非复制粘贴）

完全没错，自定义React Hook就是解决这种逻辑复用问题的标准做法！它能把你这段API请求、状态更新、错误处理的逻辑全部封装起来，让任意组件都能轻松复用，再也不用复制粘贴冗余代码。

具体实现步骤 #

首先，我们把你的逻辑抽成一个独立的自定义Hook，比如叫useCommunitiesFromSponsor：

import { useState, useEffect } from 'react';
import { toast } from '你的toast库路径';
import api from '你的api实例路径';

export function useCommunitiesFromSponsor() {
  // 在Hook内部管理状态，替代原来组件里的setAllCommunitiesFromSponsor
  const [communities, setCommunities] = useState([]);
  // 额外加个加载状态和错误状态，让组件能更友好地处理不同场景
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCommunities = async () => {
      try {
        setLoading(true);
        setError(null);
        const result = await api.get('https://someurl.com');
        const resultArray = Object.values(result.data.rows);
        setCommunities(resultArray);
      } catch (err) {
        setError(err);
        toast.error('Failed to fetch data from the server');
      } finally {
        setLoading(false);
      }
    };

    fetchCommunities();
  }, []);

  // 返回组件需要的状态和操作
  return { communities, loading, error };
}

在组件中复用这个Hook #

现在不管哪个组件需要这份社区数据，直接导入并调用Hook就行，每个组件都会拥有独立的状态实例：

import { useCommunitiesFromSponsor } from './路径/到/你的Hook';

function AnyComponent() {
  const { communities, loading, error } = useCommunitiesFromSponsor();

  // 根据状态渲染不同内容
  if (loading) return <div>加载中...</div>;
  if (error) return <div>数据加载失败，请稍后重试</div>;

  return (
    <div>
      {communities.map(community => (
        <div key={community.id}>{community.name}</div>
      ))}
    </div>
  );
}

关于你问的setState处理 #

原来的setAllCommunitiesFromSponsor是组件内部的状态更新函数，在自定义Hook里，我们把状态管理封装在了Hook内部——组件不再需要直接调用setState，而是通过Hook返回的communities获取最新数据。

如果你的组件需要主动触发重新请求（比如用户点击刷新按钮），还可以在Hook里加一个refetch函数并返回：

// 在useCommunitiesFromSponsor Hook里新增：
const refetch = async () => {
  setLoading(true);
  setError(null);
  try {
    const result = await api.get('https://someurl.com');
    const resultArray = Object.values(result.data.rows);
    setCommunities(resultArray);
  } catch (err) {
    setError(err);
    toast.error('Failed to fetch data from the server');
  } finally {
    setLoading(false);
  }
};

// 修改返回值
return { communities, loading, error, refetch };

然后在组件里就能这样用：

function AnyComponent() {
  const { communities, loading, error, refetch } = useCommunitiesFromSponsor();

  return (
    <>
      <button onClick={refetch}>刷新数据</button>
      {/* 其他渲染逻辑 */}
    </>
  );
}

为什么这是正确的做法 #

自定义Hook完全遵循React的Hook规则，每个组件调用Hook时都会创建独立的状态，不会互相干扰。而且所有逻辑集中在一处，后续要修改API地址、调整数据处理逻辑或者新增功能，只需要改这一个Hook文件，所有用到的组件都会自动更新，维护成本极低。

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