Javascript 如何处理嵌套使用效果？

最近我开始用鱼钩，尽管它们是厨师，但它们让我有点头疼

我有一个自定义的

useFetch（）

hook，用于从API获取数据

我还有一个组件，需要在其中多次使用

useFetch

，结果必须从一个组件传递到另一个组件

例如：

const ComponentName=（）=>{
const{responseUserInfo}=useFetch（'/userinfo'）
常量{responseOrders}=useFetch（`/orders？id=${responseUserInfo.id}`）
const{isorderfundable}=useFetch（`/returnable？id={responseOrders.latest.id}`）
返回{isorderefundable}
}

---

那么，如何在不创建3个中间包装器的情况下“级联”钩子呢？我必须使用HoC吗？

您的钩子可以返回回调，调用时API会调用：

  const [getUserInfo, { userInfo }] = useFetch('/userinfo');
  const [getOrders, { orders }] = useFetch(`/orders`)
  const [getOrderRefundable, { isOrderRefundable }] = useFetch(`/refundable`);

  useEffect(getUserInfo, []);
  useEffect(() => { if(userInfo) getOrders({ id: userInfo.id }); }, [userInfo]);
  useEffect(() => { if(orders) getOrderRefundable({ id: /*..*/ }); }, [orders]);

但是，如果您总是依赖于获取的整个数据，我只会使用一种效果来加载所有数据：

  function useAsync(fn, deps) {
    const [state, setState] = useState({ loading: true });
    useEffect(() => { 
       setState({ loading: true });
       fn().then(result => { setState({ result }); });
    }, deps);
    return state;
 }

 // in the component
 const { loading, result: { userInfo, orders, isRefundable } } = useAsync(async function() {
   const userInfo = await fetch(/*...*/);
   const orders = await fetch(/*...*/);
   const isRefundable = await fetch(/*...*/);
   return { userInfo, orders, isRefundable };
 }, []);

---

钩子可以返回回调，调用时API调用：

  const [getUserInfo, { userInfo }] = useFetch('/userinfo');
  const [getOrders, { orders }] = useFetch(`/orders`)
  const [getOrderRefundable, { isOrderRefundable }] = useFetch(`/refundable`);

  useEffect(getUserInfo, []);
  useEffect(() => { if(userInfo) getOrders({ id: userInfo.id }); }, [userInfo]);
  useEffect(() => { if(orders) getOrderRefundable({ id: /*..*/ }); }, [orders]);

但是，如果您总是依赖于获取的整个数据，我只会使用一种效果来加载所有数据：

  function useAsync(fn, deps) {
    const [state, setState] = useState({ loading: true });
    useEffect(() => { 
       setState({ loading: true });
       fn().then(result => { setState({ result }); });
    }, deps);
    return state;
 }

 // in the component
 const { loading, result: { userInfo, orders, isRefundable } } = useAsync(async function() {
   const userInfo = await fetch(/*...*/);
   const orders = await fetch(/*...*/);
   const isRefundable = await fetch(/*...*/);
   return { userInfo, orders, isRefundable };
 }, []);

---

我认为，如果没有我所缺少的神奇银弹，那么继续进行这项工作的方法将是使用HoC来包装

useFetch

。这样，我可以等待他们完成加载，然后再调用下一步。我认为，如果没有我丢失的神奇银弹，那么继续执行此操作的方法将是使用HoC包装

useFetch

。这样，我可以等待他们完成加载，然后再调用下一步。