reactjs - 使用动态路由、下一个 JS 和 useEffect 在 React 中获取数据

Question

我有一个博客链接。链接是带有博客 ID 的动态路由。它是 Next 的 Link 包装器。

//link
<h3 className="blogTitle">
    <Link href="[blog]" as={props.item.postingId}>{props.item.title}</Link>
</h3>

现在我想将“博客 id”传递给组件并在新页面中显示数据。

//page where link leads to
const ad = () => {
    const router = useRouter()
    const {
        query: {blog},
    } = router
    
    const [data, setData] = useState(false);
    const [loading, setLoading] = useState(false);   
                   
    console.log('....outside useEffect log', blog)
    useEffect(() => {
        console.log('useEffect consolelog', blog); 
        axios.get('httpwww.blogapiadress.com/'+ ad)
            .then(response => setData(response.data))
            .then(setLoading(false))
    }, [])
  
    return( 
        <Container fluid className="padding0">
            /// data should be here.
        </Container>
    );
}
    
export default ad;

问题:在 useEffect console.log('blog', blog)返回未定义，因此路由器不会从查询中返回值。但是，在 useEffect 之外确实如此。如何解决这个问题，我想获取与路由器查询相关的数据？
由于 axios 正在获取 undefined我得到的是 404，而不是博客 ID。

Answer 1

您可以使用 getStaticProps()在构建时获取博客数据。
例子:

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  
  // Access route params:
  const blog = context.query.blog // or context.params.blog for parametrized routes
  return {

  const res = await fetch('https://...')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

更多信息 NextJS docs .