Btukfyl

I am very new to React Native, Networking, and Programming as a whole. I am attempting to fetch JSON data from Reddit for an app I'm building, but I am receiving error messages when trying to access the Objects of the data. Below is the code I am using to fetch and console log this data.

componentDidMount(){

fetch ('https://www.reddit.com/r/financialindependence.json')

  .then(res => res.json())

  .then(data => {

       this.setState({

            data: data

    })

  })

  .catch( error => {

      console.error(error)

  })   

}

render() {

    const myData = this.state.data

    if (myData !== undefined) {

        console.log(myData)

}



return(

    <View style = {styles.container}>

        <MainDrawerHeader title = 'Links' />

        <Text> This is the Links Screen </Text>

    </View>

    )

  }

}

This works and logs to the console the following.

[16:54:41] Object {    

[16:54:41]   "data": Object {

[16:54:41]     "after": "t3_9ysab7",

[16:54:41]     "before": null,

[16:54:41]     "children": Array [

[16:54:41]       Object {

[16:54:41]         "data": Object {

[16:54:41]           "approved_at_utc": null,

[16:54:41]           "approved_by": null,

[16:54:41]           "archived": true,

[16:54:41]           "author": "Omitted For Privacy",

And when I access myData.data , it works as well

[16:59:29] Object {

[16:59:29]   "after": "t3_9ysab7",

[16:59:29]   "before": null,

[16:59:29]   "children": Array [

[16:59:29]     Object {

[16:59:29]       "data": Object {

[16:59:29]         "approved_at_utc": null,

But when I try to access the second nested object (either 'after', 'before', or 'children' (and since children is an array, I tried to access the first element) I receive the following error:

[17:00:39] TypeError: TypeError: TypeError: 

undefined is not an object (evaluating 'myData.data.after')

Which confuses me because I tried to catch the undefined object with my 'if' statement. Any tips, not sure where to go from here. Thank you

I could be mistaken here, but in your third line it appears you may not be returning the res.json() to the next .then() in your Promise chain, like so:

componentDidMount(){

   fetch ('https://www.reddit.com/r/financialindependence.json')

   .then(res => { 

       let resultToPass = res.json();

       return resultToPass;

   })

   .then(data => {

     this.setState({

         data: data

     });

   })

   .catch( error => {

   console.error(error)

   })   

}

At least superficially that would explain to me why you can access the res values and log them but they're not making it to your screen components -- they just aren't making it to where you're calling this.setState({data: data}).

Edit: I broke out the return statement by first assigning a variable, but I believe you could just as easily do return res.json(); and be fine.

Edit 2: Moved the second set of }) for the this.setState() because I made a formatting goof.