Can't access the data of Facebook Graph Api response - reactJs

user_12140117 0
Viewed 655

I tried all the day to find a solution on how I can access Facebook nested response. I use FB.api with a nested request and I got the response and it is ok.

Here a sample of the Response I got from Facebook Graph Api

{
  "insights": {
    "data": [
      {
        "name": "page_fan_adds_unique",
        "period": "month",
        "values": [
          {
            "value": 272,
            "end_time": "2019-10-08T07:00:00+0000"
          },
          {
            "value": 270,
            "end_time": "2019-10-09T07:00:00+0000"
          }
        ],
        "title": null,
        "description": "The number of new people who have liked your Page.",
        "id": "1021596371302281/insights/page_fan_adds_unique/month"
      },
      {
        "name": "page_fan_removes_unique",
        "period": "month",
        "values": [
          {
            "value": 450,
            "end_time": "2019-10-08T07:00:00+0000"
          },
          {
            "value": 453,
            "end_time": "2019-10-09T07:00:00+0000"
          }
        ],
        "title": null,
        "description": "Unlikes of your Page.",
        "id": "1021596371302281/insights/page_fan_removes_unique/month"
      },
      {
        "name": "page_views_total",
        "period": "month",
        "values": [
          {
            "value": 6430,
            "end_time": "2019-10-08T07:00:00+0000"
          },
          {
            "value": 6339,
            "end_time": "2019-10-09T07:00:00+0000"
          }
        ],
        "title": null,
        "description": "The number of times a Page's profile has been viewed by logged in and logged out people.",
        "id": "1021596371302281/insights/page_views_total/month"
      }
    ],

i'm using react. I made the APi call in the parent component like so :

async componentDidMount() {
    const resI = await axios.get(
      'https://graph.facebook.com/MyID/',
      {
        params: {
          access_token: process.env.REACT_APP_FACEBOOK_ACCESS_TOKEN,
          fields:
            'insights.metric(page_fans, post_engaged_users, post_impressions_unique, page_fan_adds_unique, page_fan_removes_unique, page_views_total, page_fans_gender_age, page_fans_country, page_fans_city, page_fans_locale).period(month)'
        }
      }
    );
    this.setState({insights: resI.data});
    console.log(this.state.insights.insights.data[0].values[1].value); //I Get 270. It working in the parent component
  }

I past the data I got from the API as a props to my other components

....
<div>
   <GlobalPerf insights={this.state.insights} />
</div>
......

Here is where the problem start. I can't access value in the values array within my child that components

class GlobalPerf extends Component {
  render() {
    const ins = this.props.insights; // I can't go deeper than that.

    console.log(ins.insights);

I can't access the value in the object. I can't go deeper than this.props.insights When I try this.props.insights.data it not working. Can someone help me figuring out ? Thx

react-props reactjs javascript
1 Answers
this.setState({insights: resI.data});
console.log(this.state.insights.insights.data[0].values[1].value); //I Get 270. It working in the parent component

The above statements should not work, since the setState is asynchronous and does not update the value synchronously. Probably showing the old state value?

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

You may be trying to access the props.insights before axios completes

const ins = this.props.insights; // probably wait for the axios to complete the fetch before trying to access the value! write it as

console.log(ins && ins.insights); //will give insights once the component rerenders after the props change due to the state being updated in the parent after axios returns!
user_84535020
Related