Next.js useRouter() 没有在 useEffect() 中返回变量答案

【问题标题】：Next.js useRouter() not returning variable inside useEffect()Next.js useRouter() 没有在 useEffect() 中返回变量
【发布时间】：2022-01-26 05:50:19
【问题描述】：

我试图在 useEffect() 中返回 useRouter() 变量，但无法获取。在控制台内出现未定义的错误。我实际上是根据 slug 从 API 中获取数据的。

import { useRouter } from 'next/router';
import {useEffect, useState} from 'react'; 
import axios from "axios";
const Post = () => {
const router = useRouter();
const [snippets,SetSnippets] = useState();
const { snippet_slug } = router.query;

var config = {
headers: {
    accept: '*/*',
    'Content-Type': 'application/json',
    'API_ACCESS_KEY': 'hns2V0Ddbkkn8r1XLq3Kw7ZoiBTR0nmA',
}
};    
const url = 'api/viewsnippets';
useEffect(async ()=>{
var data = {
  slug: snippet_slug,
} 
console.log(snippet_slug); // Here i am getting error(i.e undefined)  
await axios.post(url,data,config)
.then(function (response) {
SetSnippets(response.data);
});
},[]);

return (
  <>
  {snippets && (
    <h1>{snippets.snippet_title}</h1>
  )}
  </>
);
}
export default Post;

【问题讨论】：

你的 url 查询参数中有 sn-p_slug 吗？例如：[域]/path?sn-p_slug="somevalue"
我这里用的是POST方法
我的意思是您的页面 url... router.query 仅当您的页面 url 在查询参数中包含 sn-p_slug 时才包含 sn-p_slug 例如：[domain]/path?sn-p_slug="somevalue "
是的 URL 包含 -> [域]/path?sn-p_slug="somevalue"。 api方面一切都很好。我在邮递员上测试过。问题是我无法在 useEffect 中获取 sn-p_slug。可能是在useRouter之前加载useEffect
是的，useEffect 在 useRouter 之前加载。检查下面的答案。

标签： reactjs next.js

【解决方案1】：

错误在这里

const { snippet_slug } = router.query;

您最终通过解构重命名与分配值。

使用

const snippet_slug = router.query;

如果不存在查询字符串，则在页面加载时返回文档定义的空对象，而不是错误

https://stackblitz.com/edit/nextjs-a2h28v?file=pages/index.js

https://nextjs-a2h28v--3000.local.webcontainer.io/?what=why - 查看控制台

查看此帖子https://www.barrymichaeldoyle.com/destructuring/#:~:text=A%20Common%20Pitfall%20and%20The%20Inspiration%20for%20this%20Post

【讨论】：

【解决方案2】：

以下代码解决了我的问题...谢谢大家的回复

useEffect(async ()=>{
  if(!router.isReady) return;
  const { sid } = router.query;
var data = {
  slug: sid,
} 
console.log(sid);  
await axios.post(url,data,config)
.then(function (response) {
SetSnippets(response.data);
});

}, [router.isReady]);

【讨论】：