无休止的获取循环，尽管 useCallback

Question

我的 React Native 应用程序有一个问题，在加载选项卡时，我有一个 URL 获取请求来返回数据，但由于某种原因，回调发生和 try 语句之间存在无限循环，但它没有到达代码的其余部分并返回对象。我是否错误地使用了 useCallback？

日志：

 LOG  ~~ fetchData - try ~~
 LOG  ~~ fetchData ~~
 LOG  ~~ fetchData - try ~~
 LOG  ~~ fetchData ~~
 LOG  ~~ fetchData - try ~~

获取代码（useFetch）：

import axios from 'axios';
import { useState, useEffect, useCallback } from 'react';

export const useFetch = (method: string, url: string, body: any) => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState(null);
  const [serverError, setServerError] = useState(null);

  const fetchData = useCallback(async () => {
    console.log('~~ fetchData ~~');
    try {
      console.log('~~ fetchData - try ~~');
      const res = await axios({
        method: method,
        url: url,
        data: body,
      });
      console.log('~~ fetchData - res ~~');
      console.log(res);
      const data = await res?.data;
      console.log('~~ setApiData - useState ~~');
      console.log(`Data: ${data}`);
      setApiData(data);
      setIsLoading(false);
    } catch (error: any | unknown) {
      setServerError(error);
      setIsLoading(false);
    }
  }, [url, method, body]);

  useEffect(() => {
    setIsLoading(true);
    fetchData();
  }, [fetchData]);

  return { isLoading, apiData, serverError };
};

发生提取的选项卡：

export { useFetch } from '../../hooks/useFetch';

export default function TabTwoScreen() {
  const { isLoading, serverError, apiData } = useFetch(
    'GET',
    'https://jsonplaceholder.typicode.com/posts/1',
    {}
  );
  }

Answer 1

似乎每次

fetchData

发生变化时，你的 useEffect 都会触发。根据您提供的代码示例，它似乎会更改每个渲染，因为

body

包含在其依赖项中。由于

body

是一个对象，因此每次渲染都会成为一个新的依赖项，导致

fetchData

被重新创建并且

useEffect

再次运行。

要解决此问题，您可以使用 useMemo 尝试帖子下面已发布的答案，或者从依赖项数组中删除正文并尝试稍微重构您的代码。