Next.js中如何将子组件getInitialProps获取的数据传递给父页面？

Hey there! Let's break down why you're hitting this "Cannot read property 'map' of undefined" error and fix it up.

问题根源 #

The key thing to remember about Next.js's getInitialProps is that it only automatically runs for page components (the ones directly in your pages directory). When you import that component as a child into another page, it's no longer treated as a page—so its getInitialProps never gets called. That means the data you're trying to render (like stars in your example, or an array you're trying to map over) never loads, leaving your props as undefined and triggering the error.

解决方案1：父页面统一获取数据（推荐SSR场景） #

Move the data-fetching logic up to the parent page's getInitialProps, then pass the data down to the child component via props. This keeps the SSR behavior intact, so the data loads server-side before rendering.

修改后的父页面（pages/index.js）：

import React from 'react'
import App from '../components/App.js';
import 'isomorphic-unfetch'

export default class Index extends React.Component {
  static async getInitialProps () {
    // 把原来子组件的请求逻辑移到这里
    const res = await fetch('https://api.github.com/repos/zeit/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
  }

  render () {
    // 将获取到的数据通过props传给子组件
    return (
      <div>
        <App stars={this.props.stars} />
      </div>
    )
  }
}

修改后的子组件（components/App.js）：

import Link from 'next/link'

export default class App extends React.Component {
  render () {
    // 可选：添加加载状态或空值判断，避免渲染时的临时错误
    if (this.props.stars === undefined) {
      return <p>Loading stars...</p>
    }

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

解决方案2：子组件内独立获取数据（客户端渲染场景） #

If you want the child component to handle its own data fetching (note this will be client-side only, so no SSR for this data), you can use componentDidMount (for class components) or useEffect (for function components) to fetch data after the component mounts.

Example for class components:

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

export default class App extends React.Component {
  state = { stars: undefined }

  async componentDidMount() {
    const res = await fetch('https://api.github.com/repos/zeit/next.js')
    const json = await res.json()
    this.setState({ stars: json.stargazers_count })
  }

  render () {
    if (this.state.stars === undefined) {
      return <p>Loading stars...</p>
    }

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

This way, the component fetches data on the client after it renders, so you'll see a loading state first before the data appears.

额外提示 #

For any array you're trying to map over, always add a guard clause (like {data && data.map(...)} or optional chaining {data?.map(...)}) to handle cases where the data isn't ready yet. This prevents the "Cannot read property 'map' of undefined" error even if there's a delay in data loading.

内容的提问来源于stack exchange，提问作者Denis J