javascript - 如何使用 React 自定义钩子(Hook)重用 api 的数据获取逻辑

Question

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

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

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

现在我可以定义一个 useFetchProducts reducer

  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);  
     }); 
   }, [])
 }

如何从该 reducer 将产品和加载状态返回到我的组件，以隐藏或显示加载程序以及显示产品列表，

Answer 1

您只需从自定义 Hook 返回值即可。

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}
 }

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