Next.js组件调用报Cannot read property 'map' of undefined错误

你对Next.js的getInitialProps执行逻辑理解有误，规则如下：

• getInitialProps仅会在pages目录下的顶层路由页面组件上被Next.js框架自动调用执行，被其他页面引入的普通子组件，绑定的getInitialProps不会被触发。
• 你直接在浏览器打开Data对应路由时，Next.js会自动执行Data上的getInitialProps，把接口返回的data注入组件props，props.data是正常数组，.map()调用可以正常运行。
• 当你在index.js中把Data作为普通子组件用<Data />标签调用时，Data上的getInitialProps根本不会执行，组件props中不存在data字段，props.data值为undefined，调用.map()自然会抛出TypeError: Cannot read property 'map' of undefined错误。
• 额外代码问题：
  • React导入名首字母必须大写，你写的import react from "react"不符合JSX解析规则，部分构建环境会直接报错
  • 你请求的是用户列表接口，返回的用户数据结构中没有title字段，就算数据正常加载，data.title渲染出来也是空值

根据你的使用场景二选一即可：

场景1：Data作为公共子组件在index页面中复用 #

1. 删掉Data组件上绑定的getInitialProps，给列表渲染加空值兜底，修正React导入写法：

import React from "react";

function Data(props) {
    // props.data不存在时默认用空数组兜底，彻底避免map报错
    const dataSource = props.data || [];
    return <div className="abc">
        {
            dataSource.map(item => (
                <div key={item.id}>
                    {/* 用户接口返回的姓名字段是name，不是title */}
                    <a>{item.name}</a>
                    {props.title}
                </div>
            ))
        }
    </div>
}
export default Data

2. 把数据请求逻辑移到父页面index.js的getInitialProps中，拿到数据后通过props传给Data组件：

import Data from './Data';

function HomePage(props) {
  return (
    <div>
      <h1>首页</h1>
      <Data data={props.userList} title="站点用户列表" />
    </div>
  )
}

HomePage.getInitialProps = async function() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  const userList = await res.json();
  return { userList }
}

export default HomePage;

场景2：Data作为独立路由页面使用 #

不需要在index.js中手动引入Data组件渲染，直接通过Next.js路由访问/data路径即可打开该页面。

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