getServerSideProps 在 nextjs 中未定義

Question

我想使用 getServerSideProps 將數組（initialPosts）傳遞到我的 Home 函數中。 但是道具是未定義的。 我查看了許多解決方案，但沒有一個有效。

我在 getserversideprops 中使用了 initialPosts 作為道具，其中存在數組數據。 我已經使用帖子在 Home 函數和名為 posts.map() 的地圖函數中存儲 initialPosts 道具。

錯誤出現在 Home 函數中的 post.map() 行。

錯誤：“TypeError：無法讀取未定義的屬性（讀取'map'）”

import Header from '../component/header'
import { useState } from 'react'


export async function getServerSideProps(context){
    return{
        props:{
            initialPosts: [
              {
                  user: "Dilpreet",
                  profile: 'img/dilpreet.jpg',
                  url: 'img/meme.jpg',
                  caption: "New meme i found #thor",
                  comment_user: "Manik",
                  comment: "my dentist to me :))",
              },
              {
                  user: "Manik",
                  profile: 'img/dilpreet.jpg',
                  url: 'img/meme2.jpg',
                  caption: "New meme i found #alien",
                  comment_user: "Manik",
                  comment: "my dentist to me :))",
              },
              {
                  user: "Dilpreet",
                  profile: 'img/dilpreet.jpg',
                  url: 'img/meme3.jpg',
                  caption: "New meme i found #himanshu",
                  comment_user: "Manik",
                  comment: "my dentist to me :))",
              }
          ],
        },
    }
}


function Home(props){
    const [posts,setPosts] = useState(props.initialPosts)

    return(
        <div className='m-3'>
            {/* Header */}

                <Header />

            {/* Main */}
      
            <section className='flex flex-row'>
                <div className='w-1/2 h-screen'></div>
                <div className='w-1/2 bg-emerald-300 flex flex-row'>

                    {/* <Feed posts={initialPosts} /> */}
                    <div className="flex flex-col overflow-auto scroll-smooth no-scrollbar h-screen w-full rounded-xl">
            {
                posts.map((n) => {
                    return(
                        <>
                        <div className="flex flex-row mx-auto">
    
                        {/* User post */}
              
                        <div className='flex flex-col mb-16 rounded-xl bg-slate-100 shadow-xl shadow-bg-slate-300'>
              
                          {/* User post content */}
              
                          <div className='flex flex-col'>
              
                            {/* User profile */}
                            <div className='flex flex-row items-center mx-4 mt-3'>
              
                              {/* Profile pic of user */}
              
                              <div className='relative inline-block'>
                                <img class="inline-block object-cover w-12 h-12 rounded-full" src={n.profile}></img>
                                <span class="absolute bottom-0 right-0 inline-block w-3 h-3 bg-green-600 border-2 border-white rounded-full"></span>
                              </div>
              
                              {/* UserName */}
              
                              <h1 className="mx-2">{n.user}</h1>
              
                              {/* Status */}
              
                              <div></div>
              
                            </div>
              
                            {/* Post */}
              
                            <div className='mx-auto'>
                              <img className="h-[768px] w-[768px] object-contain" src={n.url}></img>
                            </div>
                          </div>
              
                          {/* User post caption */}
              
                          <div className="my-5 mx-3">
                            {n.caption}
                          </div>
    
                          {/* Buttons */}
    
                          <div className="flex flex-row p-4">
                            <button className="w-1/3">Like</button>
                            <button className="w-1/3">Comment</button>
                            <button className="w-1/3">Send</button>
                          </div>
                        </div>
    
                    </div> 
                    </>                 
                    )
                    })
            }
            </div>
          
                </div>
            </section>
      
            </div>
    )
}

export default Home

我的 _app.js 文件：

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Answer 1

下面的代碼經過測試和工作。

如果您使用CTRL+C和CTRL+V此代碼並且它不起作用，則意味着您在設置/參數中有錯誤

import * as React from "react";
import { useState } from "react";


export default function Home(props){
  const [posts,setPosts] = useState(props.initialPosts)
  //all is good, data is passing to your Home component
  console.log(posts)
  return(
      <div className='m-3'>


          {/* Main */}
    
          <section className='flex flex-row'>
              <div className='w-1/2 h-screen'></div>
              <div className='w-1/2 bg-emerald-300 flex flex-row'>

                  {/* <Feed posts={initialPosts} /> */}
                  <div className="flex flex-col overflow-auto scroll-smooth no-scrollbar h-screen w-full rounded-xl">
          {
              posts.map((n) => {
                  return(
                      <>
                      <div className="flex flex-row mx-auto">
  
                      {/* User post */}
            
                      <div className='flex flex-col mb-16 rounded-xl bg-slate-100 shadow-xl shadow-bg-slate-300'>
            
                        {/* User post content */}
            
                        <div className='flex flex-col'>
            
                          {/* User profile */}
                          <div className='flex flex-row items-center mx-4 mt-3'>
            
                            {/* Profile pic of user */}
            
                            <div className='relative inline-block'>
                              <img className="inline-block object-cover w-12 h-12 rounded-full" src={n.profile} />
                              <span className="absolute bottom-0 right-0 inline-block w-3 h-3 bg-green-600 border-2 border-white rounded-full"></span>
                            </div>
            
                            {/* UserName */}
            
                            <h1 className="mx-2">{n.user}</h1>
            
                            {/* Status */}
            
                            <div></div>
            
                          </div>
            
                          {/* Post */}
            
                          <div className='mx-auto'>
                            <img className="h-[768px] w-[768px] object-contain" src={n.url}></img>
                          </div>
                        </div>
            
                        {/* User post caption */}
            
                        <div className="my-5 mx-3">
                          {n.caption}
                        </div>
  
                        {/* Buttons */}
  
                        <div className="flex flex-row p-4">
                          <button className="w-1/3">Like</button>
                          <button className="w-1/3">Comment</button>
                          <button className="w-1/3">Send</button>
                        </div>
                      </div>
  
                  </div> 
                  </>                 
                  )
                  })
          }
          </div>
        
              </div>
          </section>
    
          </div>
  )
}

export async function getServerSideProps(context){
  return{
      props:{
          initialPosts: [
            {
                user: "Dilpreet",
                profile: 'img/dilpreet.jpg',
                url: 'img/meme.jpg',
                caption: "New meme i found #thor",
                comment_user: "Manik",
                comment: "my dentist to me :))",
            },
            {
                user: "Manik",
                profile: 'img/dilpreet.jpg',
                url: 'img/meme2.jpg',
                caption: "New meme i found #alien",
                comment_user: "Manik",
                comment: "my dentist to me :))",
            },
            {
                user: "Dilpreet",
                profile: 'img/dilpreet.jpg',
                url: 'img/meme3.jpg',
                caption: "New meme i found #himanshu",
                comment_user: "Manik",
                comment: "my dentist to me :))",
            }
        ],
      },
  }
}