如何使用 react 自定义钩子重用从 api 获取数据逻辑

Question

我有两个组件根据用户类型呈现不同的UI。这两个组件在从 API 获取数据、连接到存储方面具有近 50% 的相似逻辑。

我尝试过，通过创建自定义钩子来重用登录名。

const { products, loading} = useFetchProducts(userId);

现在我可以定义一个 useFetchProducts 缩减器

  const useFetchProducts= (userId) => {
   const [ loading, setLoading ] = useState(false);
   const [ products, setProducts ] = useState(null);
   useEffect(() => {
       setLoading(true);
         fetchUserProducts(userId).then((res) => {
           setLoading(false);
           setProducts(res.data);  
     }); 
   }, [])
 }

如何从此减速器将产品和加载状态返回到我的组件以隐藏或显示加载器以及显示产品列表，

Answer 1

你只需要从自定义钩子返回值。

const useFetchProducts= (userId) => {
   const [ loading, setLoading ] = useState(false);
   const [ products, setProducts ] = useState(null);
   useEffect(() => {
       setLoading(true);
         fetchUserProducts(userId).then((res) => {
           setLoading(false);
           setProducts(res.data);  
     }); 
   }, [])
   return {loading, products}
 }

它将起作用，因为当数据可用时，它会导致重新渲染，因此，您使用自定义钩子的组件将重新渲染导致更新

Answer 2

你需要从自定义钩子返回值。

const useFetchProducts= (userId) => {
   const [ loading, setLoading ] = useState(false);
   const [ products, setProducts ] = useState(false);
   useEffect(() => {
       setLoading(true);
         fetchUserProducts(userId).then((res) => {
           setLoading(false);
           setProducts(res.data);  
     }); 
   }, [])
   return { products, loading }
 }