如果直接从 index.js 调用，Nexjs getStaticProps / getInitialProps 通过工作返回未定义的组件

Posted 2023-03-30

【中文标题】如果直接从 index.js 调用，Nexjs getStaticProps / getInitialProps 通过工作返回未定义的组件

【英文标题】：Nexjs getStaticProps / getInitialProps return undefined for a component by work if directly called from index.js

【发布时间】：2021-06-02 21:48:16

【问题描述】：

我正在尝试这个：https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops 但我创建了一个新组件，而不是直接添加到 index.js 文件中。

虽然本教程中给出的内容对我有用，但如果我尝试使用单独的组件，getStaticProps 或 getInitialProps 将返回 undefined 作为道具。

我添加了这个问题，因为我浪费了三天时间来了解它的根本原因，但仍然无法调试它。

这个问题的答案对我不起作用：Getting props as undefined in component returned from getStaticProps

这是我的代码：

_app.js：

import '../styles/globals.css'

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


MyApp.getInitialProps = async (Component, ctx) => 
    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : ;
    if (Object.keys(pageProps).length > 0) 
      return pageProps;
     else 
      return ;
    
  ;

export default MyApp

globals.css:

html,
body 
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;


* 
  box-sizing: border-box;


a 
  color: #0070f3;
  text-decoration: none;


a:hover 
  text-decoration: underline;


img 
  max-width: 100%;
  display: block;

post.js：

import fs from 'fs'
import path from 'path'
//import matter from 'gray-matter'

// const fs = require('fs')
// const path = require('path')

const postsDirectory = path.join(process.cwd(), 'posts')

export function getSortedPostsData() 
  // Get image name
  const fileNames = fs.readdirSync(postsDirectory)
  const allPostsData = fileNames.map(fileName => 
    const id = fileName.replace(/\.svg$/, '')
    const fullPath = path.join(postsDirectory, fileName)
    return 
      id,
      fullPath
    
  )
  return allPostsData.sort((a, b) => 
    if (a.date < b.date) 
      return 1
     else 
      return -1
    
  )


// console.log(getSortedPostsData())

Blog.js

import  getSortedPostsData  from '../lib/posts'

export async function getStaticProps() 
  const allPostsData = getSortedPostsData()
  return 
    props: 
      allPostsData
    
  


export default function Blog( allPostsData ) 
    return (
      <div>
        <section>
        <h2>Blog</h2>
        <ul>
          allPostsData.map(( id, fullPath ) => (
            <li key=id>
              fullPath
            </li>
          ))
          </ul>
          </section>
        </div>
    )
  

index.js:

import Head from 'next/head'
import Blog from '../components/Blog'

export default function Home() 
  return (
      <Blog />
  )

【参考方案1】：

getStaticProps 是only allowed on a page。

您的Blog 组件有一个getStaticProps，但它是从'../components/Blog' 导入的。它应该在pages 文件夹中。

【讨论】：

感谢您的回答，现在我明白了，但我仍然对如何将静态数据传递给我的博客组件感到困惑。 @roman-mkrtchian

知道了，我必须将数据传递到博客组件中，例如` `