Next.js使用Axios请求API报Cannot read property 'map' of undefined错误如何解决

错误原因及对应修复逻辑如下：

• 拼写错误：Next.js 约定的生命周期方法是getInitialProps，你的代码中写为getInitalProps，少了字母i，导致框架无法识别该方法，不会自动执行请求逻辑，组件接收的cosmetics参数默认是undefined
• 接口结构解析错误：https://fortnite-api.com/v2/cosmetics/br返回的响应结构为{status: 状态码, data: 化妆品数组}，你直接将外层res.data赋值给cosmetics，拿到的是外层响应对象而非内部的数组，不存在map方法
• 缺少空值防护：没有对cosmetics做非空判断就直接调用map，请求失败、返回空数据等异常场景都会直接报错

修复后完整代码：

import axios from "axios"

const CosmeticsApi = ({cosmetics, error}) => {
  // 异常场景兜底
  if (error) return <div>请求失败，请稍后重试</div>
  // 空值判断兜底
  if (!cosmetics?.length) return <div>暂无数据</div>

  return (
    <div>
      {cosmetics.map(cosmetic =>(
        <div key={cosmetic.id}>
          <h4>{cosmetic.name}</h4>
        </div>
      ))}
    </div>
  )
}

// 修正生命周期方法拼写
CosmeticsApi.getInitialProps = async ctx => {
  try {
    const res = await axios.get('https://fortnite-api.com/v2/cosmetics/br');
    // 修正取值逻辑，取响应data字段内的data数组
    const cosmetics = res.data.data;
    return { cosmetics };
  } catch (error) {
    return {error};
  };
};

export default CosmeticsApi;

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