NextJS中未定义

Question

我想使用GetServersideProps将数组（初始插件）传递到我的家庭功能中。但是道具是不确定的。我已经浏览了许多解决方案，但它们都没有起作用。

我已经在geterversideprops中使用了初始柱子作为道具，在其中存在数组数据。 我已经使用帖子将初始档案道具存储在家庭功能中，并使用名为posts.map（）的地图功能。

错误在HOME功能中的LINE post.map（）。

错误： “ TypeError：无法读取未定义的属性（读取'映射'）”

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

下面的代码经过测试＆amp;在职的。

如果您ctrl+c＆amp; 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 :))",
            }
        ],
      },
  }
}