如何正确调用useFetch函数？

Question

我成功地实现了一个useFetch函数来调用API。如果我将这样的代码添加到如下功能反应组件的根目录中，它就能很好地工作：

  const [{ data, isLoading, isError }] = useFetch(
    'http://some_api_endpoint_path'
  );

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 response = await axios.get(url);
        setData(response.data);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };

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

但是，假设我想检查新输入的username是否存在，比如输入元素的onBlur事件的触发。当我尝试实现它时，我会得到以下错误：

React Hook "useFetch" is called in function "handleBlur" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

我甚至尝试过这种方法：

  const [isChanged, setIsChanged] = useState(false);

  useEffect(() => {
    useFetch(
      'http://some_api_endpoint_path'
    );
  }, [isChanged]);

但也有同样的错误。

然后，我尝试了这个简化版本，它没有做任何有用的事情，但我正在测试React规则：

  useEffect(() => {
    useFetch(
      'http://some_api_endpoint_path'
    );
  }, []);

但我还是犯了同样的错误。

特别是在最近的两个案例中，我觉得我是在遵守胡克斯的规则，但显然不是！

在这种情况下，调用useFetch的正确方法是什么？

Answer 1

我想你是这样称呼useFetch的吧？

const onBlur = () => {
  const [{ data, isLoading, isError }] = useFetch(
    'http://some_api_endpoint_path'
  );
  ...
}

如果是真的，这是错误的。查看一下这个链接：

不要调用事件处理程序。

您可以这样实现：

// Pass common initial for all fetches.
export const useFetch = (awsConfig, apiRoot, apiPathDefault) => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  // Just pass the variables that changes in each new fetch requisition
  const fetchData = async (apiPath) => {
      setIsError(false);
      setIsLoading(true);
      try {
        const response = await axios.get(apiRoot + apiPath);
        setData(response.data);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };

  useEffect(() => {
    fetchData(apiRoot + apiPathDefault);
  }, [awsConfig, apiRoot, apiPathDefault]);

  return [{ data, isLoading, isError }, fetchData];
};

当您想要再次获取时，只需调用fetchData

const [{ data, isLoading, isError }, fetchData] = useFetch(API_ROOT(), appStore.awsConfig, defaultPath);

const onBlur = () => {
  fetchData(newPath);
  ...
}

我使用了创建useLazyQuey时阿波罗团队使用的相同原则(请打开这个链接并搜索useLazyQuery )。另外，请注意，在调用钩子并在单个fetch中传递可变变量时，我传递所有公共的和不可变的变量。