reactjs - 自定义 react 钩子(Hook)导致无限循环

Question

我有一个自定义的抓取钩子(Hook):

export const useFetch = (url: string) => {
  const [response, setResponse] = useState<any>(null);
  const [error, setError] = useState<any>(null);

  const fetchList = (url: string) => {
    return API.get(AMPLIFY_ENPOINTS.default, url, { response: true });
  };

  useEffect(() => {
    const fetchFunc = async () => {
      try {
        const fetchResponse = await fetchList(url);
        setResponse(fetchResponse.data);
      } catch (error) {
        setError(error);
      }
    };
    fetchFunc();
  }, [url]);

  return { response, error };
};

然后我在组件中使用它:

const fetchOrders = useFetch(apiUrl);
useEffect(() => {
  const { response, error } = fetchOrders;
  if (error) setError(error);
  if (response) {...}
}, [fetchOrders]);

这会导致无限循环，我应该如何解决它？

Answer 1

fetchOrder 引用会在每次重新渲染时保持更改，因为您每次都返回一个新创建的对象，因此当您在 useEffect 中调用 setError 时它会触发无限循环。

不是将fetchOrders 添加为依赖项，而是分别添加response 和error

const { response, error } = useFetch(apiUrl);
useEffect(() => {
  if (error) setError(error);
  if (response) {...}
}, [response, error]);