0

我正在做一个 ssg 网站，它没有后端，但它确实开始具有一些从另一台服务器获取一些数据的功能。我检查了 SWR 并且它工作正常，问题是我需要在按钮单击时发出发布请求，它给我一个错误：

hooks can only be called inside of the body of a function component

我看到的是我可以创建一个函数组件，在其中设置一个调用，然后在单击按钮时安装这个组件，它可以工作，但我对这种方法有疑问。这可能是为了处理获取请求，但我发了一个帖子。

ExportComponent 在页面或另一个组件中呈现。

function ExportComponent() {
  const [exportCalled, setExportCalled] = useState(false)
  const exportCall = () => {
    setExportCalled(true)
  }

  if (exportCalled) {
    return (
      <CallExport></CallExport>
    )
  }

  return (
    <Button
      onClick={ exportCall() }
    >
      Export
    </Button>
  );
}

function CallExport() {
  // api post call
  const { data, isLoading } = exportProject();
  if (isLoading) {
    return <CircularProgress />;
  }
  return (
    // call to api is done, make something with data
    <Button>Open</Button>
  )
}


export function exportProject() {
  const params = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({}),
  };
  const exportFetcher = (url) => fetch(url, params).then((r) => r.json());
  const { data, error } = useSWR('url', exportFetcher);
  return {
    data,
    isLoading: !error && !data,
    isError: error
  }
}

这是错的吗？有没有更好的办法？

4

0 回答 0