0

我正在尝试使用从 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 }];
};

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

4

1 回答 1

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 }];
};
于 2019-09-02T21:12:27.310 回答