自定义react hook导致无限循环

Question

我有一个自定义的获取钩子：

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 引用会在每次重新渲染时保留更改，因为您每次都返回一个新创建的对象，因此当您在setErroruseEffect 中调用时，它会触发无限循环。

不要fetchOrders作为依赖项添加，而是单独添加response和error

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