next js getInitialProps error Cannot read property 'map' of undefined

Question

I have an error that cannot read property 'map' of undefined TypeError I want show menus.name list after mapping menus. I don't understand this error

This is my ssr-test.js code

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>;
  }
}

Next is my db.json code

{
    "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
        }
    ]
}

This is error code..

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)

Kort · Accepted Answer · 2018-09-15 20:35:07Z

3

Firstly check of everything is OK with your fetch url and you request is working. Secondly you should extract you response data one lever deep, because you are assign an object instead of array of data.

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

answered Sep 15, 2018 at 20:35

Kort

4203 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dongdong Over a year ago

Oh thank you for ur ansser!! But this answer is not working... T_T(second case fixed but not working) However I find out that i can't get data, Menus is undefined. Help me plz! 😥

dongdong Over a year ago

oh I fixed this error. The reason is simple. I have a mistake that i called the data from another place. thank you for your interest

subodhk · Accepted Answer · 2020-06-28 20:33:00Z

1

I have been experiencing the same issue for past few days, from my experience what I think is that since there is a request to external sources in the getInitialProps() function, it returns an unresolved javascript object.

When we directly try to use the data inside the objects, it works. But .map() doesn't work.

NOTE : When printing the data to the console:

Initial State

After Expanding ( the blue 'i' represents that the data was evaluated after expanding ), hence we were unable to use it in .map()

answered Jun 28, 2020 at 20:33

subodhk

2543 silver badges5 bronze badges

Collectives™ on Stack Overflow

next js getInitialProps error Cannot read property 'map' of undefined

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related