Next.js импортирует данные выборки из дочернего компонента на родительскую страницу в React - PullRequest
Новая
       9

Next.js импортирует данные выборки из дочернего компонента на родительскую страницу в React

1 голос
/ 28 июня 2019

Я работаю над преобразованием моего CRA в приложение SSR, используя Next.js. Я только начал и уже столкнулся с простой проблемой (я надеюсь). Я могу отображать данные в браузере прямо со своей страницы index.js, используя getInitialProps (). Я, очевидно, не хочу настраивать все мое приложение на моей странице индекса, хотя.

Проблема, с которой я столкнулся при попытке импортировать данные из дочернего компонента на страницу индекса. Используя тот же код, что и мой рабочий пример, я получаю страшную ошибку «TypeError: Невозможно прочитать свойство map of of undefined». Эта простая настройка экспорта / импорта невозможна в 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 не определено.

1 Ответ

0 голосов
/ 28 июня 2019

Из документов Next.js:

Примечание: getInitialProps не может использоваться в дочерних компонентах. Только на страницах.

...