您可以使用useEffect Hook获取客户端的数据。
首先从react导入

import { useEffect } from 'react';

字符串
组件中的用法如下所示

useEffect(() => {
  return () => {
    // clean-up functions
  }
}, []);

型
第一个参数是一个函数，你可以在里面调用API。

• • useEffect的第二个参数将决定何时 * 触发 useEffect*。如果您传递空数组[ ]，则useEffect将仅在组件挂载时触发。如果您希望useEffect**在任何props更改时触发，请将此类props作为依赖项传递给数组。

如果你想从查询字符串中得到GET_CURRENT_USER_QUERY，你可以从getInitailProps传递参数，并将其作为props读取到useEffect数组依赖中。

我看到你提到了getInitailProps。所以你可能知道它的作用和它的警告。如果你想在服务器端定义数据，为什么不在表单所在的页面上使用getInitailProps。这样你就可以从props中检索数据并将其传递给表单组件。它应该直接访问url或从其他页面访问。

这个问题的内容有点混乱，我不知道为什么会涉及到一个表格，所以我会尝试根据标题来回答。
在客户端获取数据的最佳实践在新版React文档中有描述。特别是，“你可能不需要效果”页面是一个宝贵的信息来源。
它提倡两件事：
1.使用库进行客户端数据获取，通常不值得推出自己的解决方案
1.如果你不想要一个库，请正确地实现清理，如useData钩子所示：

// From React documentation
function useData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    let ignore = false;
    fetch(url)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setData(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [url]);
  return data;
}

字符串
使用方法：

function SearchResults({ query }) {
  const [page, setPage] = useState(1);
  const params = new URLSearchParams({ query, page });
  const results = useData(`/api/search?${params}`);

  function handleNextPageClick() {
    setPage(page + 1);
  }
  // ...
}

型
作为奖励，如果你想在服务器渲染和第一次客户端渲染期间显示数据，你可以使用Next.js内置功能混合服务器端数据获取，并使用服务器数据警告客户端缓存。
例如，在SWR中，这是通过the fallback option完成的。我在我的Next.js course中称这种模式为“客户端-服务器中继”，因为服务器值像中继一样传递给客户端。然后客户端代码处理交互：在突变时重新获取，轮询等。