為什么我的函數沒有在另一個 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