如何解决Next.js,在按钮点击时发出 POST 请求SSG
我正在做一个 ssg 网站,它没有后端,但它确实开始具有一些从另一台服务器获取一些数据的功能。我检查了 SWR 并且它工作正常,问题是我需要在按钮点击时发出一个发布请求,它给我一个错误:
hooks can only be called inside of the body of a function component
我看到的是,我可以创建一个函数组件,在其中设置一个调用,然后在单击按钮时安装这个组件,它可以工作,但我对这种方法有疑问。 这可能是为了处理 get 请求,但我发了一个帖子。
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
}
}
有错吗?有没有更好的办法?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。