Question

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

在我的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 }];
};

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

Answer 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 }];
};

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

1 个答案: