为什么我的函数没有在另一个 NextJs 页面中呈现？ [复制]

Question

这个问题在这里已经有了答案：

NEXTJS：getServerSideProps 不适用于组件1 个回答

10 天前关闭。

我正在构建一个 NextJs 应用程序，由于某种原因，我没有从页面“Feed.tsx”中获取一个函数来呈现在“Index.tsx”中。 但是，当我导航到“/feed”时，该功能会完美呈现。 这是为什么？

饲料.tsx

import Post from "../components/Post";

function PostList({ posts }){
  return( <>
    {posts?.map((post) => {
      return(
      <div key={post.id}>
        <Post post={post}/>
      </div>
      )
    })}
  </>
  )
}
export default PostList


export async function getServerSideProps(){
  const response = await fetch('http://localhost:3000/posts/')
  if (!response.ok) {
    const message = `An error occured: ${response.statusText}`;
    window.alert(message);
    return;
  }
  const data = await response.json();
  console.log(data);
  
  return{
    props:{
      posts: data,
    },
}
}

索引.tsx

import Create from "./create";
import PostList from "./feed";

const Home = () => {
return(
    <div>
        <h1 className="text-blue absolute inset-y-7 left-7 text-xl font-semibold mb-20">Home</h1>
        <Create />
        <PostList />
    </div>
);}

export default Home

Answer 1

getServerSideProps() 只能用页面触发，不能用组件触发，getServerSideProps 只能从页面导出。

如果你想创建一个从 API 数据中获取的组件，你可以使用useSWR library创建它。

import Post from "../components/Post";
import useSWR from 'swr'

function PostList(){
//data can be fetched only from API
const { data: posts, error: errorPosts } = useSWR('/api/posts', fetcher)

if (errorPosts ) return <div>failed to load</div>
if (!posts) return <div>loading...</div>

return( <>
    {posts?.map((post) => {
      return(
      <div key={post.id}>
        <Post post={post}/>
      </div>
      )
    })}
  </>
  )
}
export default PostList

PS 不要忘记安装npm install swr