Javascript 加载包含getStaticProps的组件

我在一个项目中使用NextJs，我创建了一个组件，在其中加载动态数据，如果我通过

localhost:3000/faq

加载，它工作正常，但如果我尝试将相同的组件导入

index.js

，则会发生错误。我可能需要传递道具，但我不知道怎么做

这是我的faq.js

import React from 'react'
import fetch from 'isomorphic-unfetch'


function Faq({ data }) {
    return (
    <div>
        <ul>
            {data.map((item) => (
            <li key={item.id}>{item.question}{item.answer}</li>
            ))}
        </ul>        
    </div>

    )
  }

  export async function getStaticProps() {
    const res = await fetch('./data/faq.json')
    const data = await res.json()

    return {
      props: {
        data,
      },
    }
  }

export default Faq

从“React”导入React
从“同构取消蚀刻”导入提取
函数Faq（{data}）{
返回(

{data.map（（项）=>(
{item.question}{item.answer}
))}

)
}
导出异步函数getStaticProps（）{
const res=wait fetch（'./data/faq.json'）
const data=await res.json（）
返回{
道具：{
数据，
},
}
}
导出默认常见问题解答

这是index.js

import Layout from '../components/layouts/layout'
import Faq from './faq'

import React, {Component} from 'react'

export default class App extends Component {

    render() {
        return(
            <Layout>
                <h1>I am Home Page</h1>
                <Faq />           
            </Layout>

        )
    }
}

从“../components/layouts/Layout”导入布局
从“./Faq”导入常见问题解答
从“React”导入React，{Component}
导出默认类应用程序扩展组件{
render（）{
返回(
我是主页
)
}
}

---

有人知道如何将faq.js加载到index.js中吗？

在

index.js

中，您导入了名为

About

的

/faq

，但在渲染函数中，您将其用作

。应以这种方式：

从“../components/layouts/Layout”导入布局
从“./Faq”导入常见问题解答
从“React”导入React，{Component}
导出默认类应用程序扩展组件{
render（）{
返回(
我是主页
)
}
}

可能。虽然提供的答案涉及

getInitialProps

，但同样适用于

getStaticProps

（只能是），尽管您可以或能够创建包装器组件。