Question

我正在使用Next.js将CRA转换为SSR应用程序。我刚刚开始，已经遇到了一个简单的问题（我希望）。我可以使用getInitialProps（）从index.js页面直接将数据呈现给浏览器。当然，我显然不想在索引页面上设置整个应用程序。

我遇到的问题是试图将数据从子组件导入索引页。使用与我的工作示例相同的代码，我得到了可怕的“ TypeError：无法读取未定义的属性'map'”错误。这个简单的导出/导入设置在React中不可用吗？

这是一个类似于我的代码的示例，位于子组件中...

import Link from 'next/link'
import 'isomorphic-unfetch'

export default class Index extends React.Component {
  static async getInitialProps () {
    // eslint-disable-next-line no-undef
    const res = await fetch('https://api.github.com/repos/zeit/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
  }

  render () {
    return (
      <div>
        <p>Next.js has {this.props.stars} ⭐️</p>
        <Link prefetch href='/preact'>
          <a>How about preact?</a>
        </Link>
      </div>
    )
  }
}

然后我将该组件导入到我的索引中...

import React from 'react'
import App from '../components/App.js';

export default class Index extends React.Component {

  render () {
    return (
      <div>
         <App />
      </div>
    )
  }
}

因此，子组件再次作为独立的父代，而不是子代。错误未定义.map。

Answer 1

从Next.js文档中：

注意：getInitialProps不能在子组件中使用。仅在页面中。

Next.js将数据从子组件导入到React中的父页面

1 个答案: