javascript - 加载包含 getStaticProps 的组件

Question

我在一个项目中使用 NextJs，我创建了一个组件来加载动态数据，如果我通过 localhost:3000/faq 加载，它可以正常工作，但如果我尝试导入将相同的组件放入 index.js 时，会发生错误。我可能需要传递 Prop ，但我不知道该怎么做。

这是我的 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

这是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>

        )
    }
}

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

Answer 1

内部index.js你导入了./faq名字About但在渲染函数中，您将其用作 <Faq /> .应该是这样的:

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>

        )
    }
}