为什么我的 useFetch 函数被调用了两次？答案

【问题标题】：Why is my useFetch function called twice?为什么我的 useFetch 函数被调用了两次？
【发布时间】：2019-12-31 19:44:54
【问题描述】：

我正在尝试使用从 API 端点获取数据的 React Hooks 构建我的第一个函数。代码如下所示。

在我的 React 组件中：

  const [{ data, isLoading, isError }] = useFetch(
    'https://hn.algolia.com/api/v1/search?query=apple'
  );
  console.log(data);

在我导入的名为 requests.js 的文件中：

export const useFetch = (url) => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsError(false);
      setIsLoading(true);
      try {
        const result = await axios(url);
        setData(result.data);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };

    fetchData();
  }, [url]);
  return [{ data, isLoading, isError }];
};

虽然它有效，但每当我刷新浏览器时，都会对端点进行两次调用。为什么会这样，我怎样才能让它只被调用一次？

【问题讨论】：

听起来您的组件可能正在重新安装？代码看起来不错，url 不更改会阻止双重 API 调用。
看起来 url 在您使用钩子时正在发生变化。尝试从useEffects的依赖中移除它。
建议使用useMemo 来优化您的重新渲染
@Alvaro，关于为什么它可能发生在他的案例中的示例场景？
@AlexanderKim 我认为 3 种可能性是： 1.该组件被多次使用。 2.组件正在安装&卸载&重新安装。 3.url参数正在改变，例如在组件内部使用钩子：const [url, setUrl] = useState("https://example.com/1"); useFetch(url); useEffect(() => {setUrl("https://example.com/2");}, []);或类似的方式。

标签： react-hooks use-effect

【解决方案1】：

从useEffect() 中删除依赖项应该可以解决问题：

  const [{ data, isLoading, isError }] = useFetch(
    'https://hn.algolia.com/api/v1/search?query=apple'
  );
  console.log(data);

export const useFetch = (url) => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsError(false);
      setIsLoading(true);
      try {
        const result = await axios(url);
        setData(result.data);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };

    fetchData();
  }, []/* Will run once */);
  return [{ data, isLoading, isError }];
};

【讨论】：