Why Ajax request returns error in React

Why Ajax request returns error in React
0

#1

Hi. I’m trying to do an ajax call using axios, but it returns me an error in console:

Fetch Error :-S TypeError: Cannot read property 'entry' of undefined(…)

I’ve checked it in https://resttesttest.com/ and it returns me correct response and status 200.
Here’s an extract of code:

  constructor () {
    super()
    this.state = {
      sheetData: []
    }
  }

  componentDidMount () {
    axios.get(`https://spreadsheets.google.com.../public/basic?alt=json`)
      .then((response) => {
        this.setState({sheetData: response.feed.entry})
        console.log(response)
      })
      .catch((error) => {
        console.log('Fetch Error :-S', error)
      })
  }

#2

Put the console.log before this.setState. I assume the response object doesn’t have a feed property.

edit: Check out the documentation - the response object puts data in the data property. So, you’d need to use response.data.feed.entry.


#3

yep, you are right. There’s no feed property. Thank’s for a hint. I used fetch before that, so I guessed axios is the same but turns out that not exactly

Object {data: Object, status: 200, statusText: "", headers: Object, config: Object…}