next js getInitialProps error无法读取未定义的属性“map”

Question

我有一个错误，无法读取未定义TypeError的属性'map'我希望在映射菜单后显示menus.name列表。我不明白这个错误

这是我的ssr-test.js代码

import Layout from "../components/Layout";
import axios from "axios";

export default class SSRTest extends React.Component {
  static async getInitialProps({ req }) {
    const response = await axios.get("http://localhost:9000/menus");
    return { menus: response.data };
  }
  render() {
    const { menus } = this.props;
    const menuList = menus.map(menu => <li key={menu.id}>{menu.name}</li>);
    return <ul>{menuList}</ul>;
  }
}

接下来是我的db.json代码

{
    "menus": [{
            "id": 1,
            "name": "연어",
            "picture": 123,
            "caption": "존맛탱",
            "url": 123
        },
        {
            "id": 2,
            "name": "돈까쓰",
            "picture": 123,
            "caption": "존맛탱",
            "url": 123
        },
        {
            "id": 3,
            "name": "김치볶음밥",
            "picture": 123,
            "caption": "존맛탱",
            "url": 123
        }
    ]
}

这是错误代码..

Cannot read property 'map' of undefined
TypeError: Cannot read property 'map' of undefined
    at SSRTest.render (pages/ssr-test.js:11:0)
    at finishClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13537:0)
    at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13500:0)
    at beginWork (node_modules/react-dom/cjs/react-dom.development.js:14089:0)
    at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:16415:0)
    at workLoop (node_modules/react-dom/cjs/react-dom.development.js:16453:0)
    at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:16532:0)
    at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:17386:0)
    at performWork (node_modules/react-dom/cjs/react-dom.development.js:17294:0)
    at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:17266:0)

帮助我真棒开发者!! T_T

Answer 1

首先使用您的获取网址检查所有内容是否正常，并且您的请求正在运行。其次，您应该提取一个杠杆深度的响应数据，因为您分配的是对象而不是数据数组。

  static async getInitialProps({ req }) {
      const response = await axios.get("http://localhost:9000/menus");
      return { menus: response.data.menus };
  }