Question

我需要在 useEffect() 中获取 api。我尝试这样做，但它引发了以下错误：Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

我的代码如下：

-Api 我需要获取：

export const fetchMyApi = async (code) => {
  const { data } = await useQuery("data", () =>
    clientAPIs.getData(code)
  );
  return data;
};

-我的 useEffect 代码：

  useEffect(() => {
    await fetchMyApi(values.code)
  }, [values]);

我在互联网上发现了很多关于此的问题，但它们都提供了基本相同的解决方案，例如：

  useEffect(() => {
    fetchMyApi(values.code)
      .then((data) => {
        return data?.options;
      })
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [values]);

或

  useEffect(() => {
    let didCancel = false;
    async function fetch() {
      const result = await fetchMyApi(values.code);
      if (!didCancel) {
        console.log(result);
      }
    }
    fetch();
    return () => {
      didCancel = true;
    }; 
  }, [values]);

在我的情况下，这些都不起作用。我正在使用 Nextjs 框架。

我应该尝试什么？

Answer 1

<块引用>

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。

你打破了钩子的规则。钩子仅在同步渲染 React 组件时被调用时有效。效果在组件渲染后单独运行。所以你不能从效果中调用钩子。

是的，你正在从一个效果中调用一个钩子，因为这个效果：

  useEffect(() => {
    await fetchMyApi(values.code)
  }, [values]);

调用 fetchMyApi 函数，该函数调用一个钩子：

await useQuery('data', () => /* ... */)

您错误地使用了反应查询。

首先让您的 fetchMyApi 只做异步任务，别无其他：

export const fetchMyApi = (code) => {
  return clientAPIs.getData(code)
};

然后从功能组件的根调用 useQuery：

function MyComponent() {
  const { data } = useQuery('data', () => fetchMyApi('some code here'))
}

The documentation 应该带您走完剩下的路

如何在 useEffect() 钩子中使用异步方法

1 个答案: