NextJs useEffect在每次路由时触发

e3bfsja2 于 2022-11-23 发布在其他

关注(0)|答案(1)|浏览(156)

我正在建立一个nextjs博客应用程序。
在当前的blog布局中，我设法使用useEffect/fetch（因为getInitialProps只在Pages下工作）获取了侧边栏上的数据（我需要它来显示我的“最近的帖子”），但是每当我在页面之间路由时，它就会触发。
有没有办法在初始加载后禁用此行为并创建一个常量或smth？我使用了“[]”方法，但仍然没有成功：

const [posts, setPosts] = useState([])

  useEffect(()=>{
    const fetchData = async () => {
      const res = await fetch('/api/posts');
      const {data} = await res.json();
      setPosts(data)
    }
    fetchData()
  }, []);

或者有没有更好的方法来获取我的侧边栏上的数据？这是我设法使它工作的唯一解决方案，但它只工作了一半。

next.js

来源：https://stackoverflow.com/questions/65134661/nextjs-useeffect-triggers-every-time-i-route

1条答案

按热度按时间

vuv7lop31#

import { useState, useEffect } from 'react'

export default function RightBar() {

  const [posts, setPosts] = useState([])

  useEffect(()=>{
    const fetchData = async () => {
      const res = await fetch('/api/posts');
      const {data} = await res.json();
      setPosts(data)
    }
    fetchData()
  }, []);

    return (
      <div className="rightbar content">
        <div className="rightbarContent">
          <h3 className="sidebarborder"><span className="sidebarheader">Recent Posts</span></h3>
          {posts.slice(0,5).map(posts => {
              return (
                <div key={posts._id}>
                    * <Link href={`/${posts._id}`}>{posts.title}</Link>
                </div>
              )
          })}
          <h3>Categories</h3>
          <p>blabla</p>
        </div>      
      </div>
    )
  }

组件布局如下：
布局〉页眉顶部导航主页脚
Main有2个子项〉LeftBar（我的主要内容所在的位置）和RightBar（我显示我最近的帖子的位置）
布局 Package index.js页面，所以我将props.children传递给layout〉main〉leftbar组件。
我希望这解释得够清楚了。

赞(0）回复(0）举报 2022-11-23

我来回答

NextJs useEffect在每次路由时触发

1条答案

相关问题

热门标签

最新问答