Question

我有两个组件根据用户类型呈现不同的UI。这两个组件都具有将近50％从api读取数据，连接到存储的相似逻辑。

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

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

如何使用React自定义钩子重用api中的数据获取逻辑

2 个答案: