Question

我正在尝试使用POST方法从API获取数据，但是，我正在努力将数据设置为post

import { useRouter } from 'next/router';
import Layout from '../../components/MyLayout';
import Settings from '../../components/Settings';

const Post = props =>{
    //works if I use here
    const router = useRouter();
  return (
    <Layout>
      <h1>{router.query.id}</h1>
      <p>This is the blog post content.</p>
    </Layout>
  );
}

export default Post;

Post.getInitialProps = async function(){
    //trying to get data ($_GET)
    const router = useRouter();
    const data = router.query;
    //
    const FormData = new URLSearchParams();
    const res = await fetch(Settings.api+'viewPost',{
        method: 'POST',
        headers:{
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: FormData,
    });
    const obj = await res.json();
    return(
        obj
    );
}

我收到以下错误

无效的挂钩调用。钩子只能在功能组件。可能发生以下情况之一原因： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 3.您可能在同一应用程序中拥有多个React副本。有关如何调试和调试的提示，请参见***。解决此问题。

我只是了解这一点，对不起这个问题。我真的很感谢任何答案。谢谢。

Answer 1

我做了与您完全相同的事情（尝试在getinitialProps中使用useRouter），并且刚刚得到了相同的错误，然后我四处搜寻并发现了how to get query string parameter in next，因此可以回答您的问题，您不需要在这种情况下，使用useRouter，而是使用getInitialProps（props）并查找查询参数以获取数据或ID或其他内容。希望有帮助。

Post.getInitialProps = async function({ query }){
   const { data } = query;
     ...................
}

useRouter在getInitialProps中不起作用

1 个答案: