React ajax fetch response undefined

Question

I am using the fetch AJAX example from the docs and am fetching this:

 https://learnwebcode.github.io/json-example/animals-1.json

Here is the componentDidMount part:

componentDidMount() {
fetch("https://learnwebcode.github.io/json-example/animals-1.json")
  .then(res => res.json())
  .then(
    (result) => {
      this.setState({
        isLoaded: true,
        items: result.items
      });
    },

I get "uncaught type error in promise, cannot read property map of undefined"

Why is this happening? This is my first attempt to use the fetch API. I have tried to log the response object, but that returns undefined.

The link to the pen is here:

 https://codepen.io/damPop/pen/yQLbxV

The reason the site wouldn't let you post that codepen link without obscuring it is that your whole question (including any necessary code) has to be in your question, not just linked. Two reasons: People shouldn't have to go off-site to help you; and links rot, making the question and its answers useless to people in the future. Please put a minimal reproducible example in the question. More: How do I ask a good question? Please put all necessary code in your question, ideally using Stack Snippets; here's how to do a React one. — T.J. Crowder
– T.J. Crowder, Commented Nov 3, 2018 at 10:18
Side note (because it's probably not the problem, it's just a problem): You're not checking for fetch failure. You're not the only one, they clearly got the API wrong, this is so common I wrote it up in a post on my anemic little blog. — T.J. Crowder
– T.J. Crowder, Commented Nov 3, 2018 at 10:18

Matt · Accepted Answer · 2018-11-03 11:02:52Z

2

result is the array of items hence result.items does not exist:

componentDidMount() {
 fetch("https://learnwebcode.github.io/json-example/animals-1.json")
 .then(res => res.json())
 .then(result => {
     console.log(result)
     this.setState({
       isLoaded: true,
       items: result
     });
   })
 .catch(error => {
   this.setState({
     isLoaded: true,
     error
   });
 })
}

https://codepen.io/mThorning/pen/ZmEyao?editors=0010

answered Nov 3, 2018 at 11:02

Matt

3241 silver badge9 bronze badges

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

Comments

Ankush Sharma · Accepted Answer · 2018-11-03 10:17:56Z

2

You are getting error in render method.

Remove items from result.item, because data is in 'result'.

Like below

componentDidMount() {
fetch("https://learnwebcode.github.io/json-example/animals-1.json")
  .then(res => res.json())
  .then(
    (result) => {
      this.setState({
        isLoaded: true,
        items: result // remove items, because data is in 'result'
      });
    },

answered Nov 3, 2018 at 10:17

Ankush Sharma

6773 silver badges11 bronze badges

Collectives™ on Stack Overflow

React ajax fetch response undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related