无法访问 Facebook Graph Api 响应的数据 - reactJs

Question

我整天都在尝试找到有关如何访问 Facebook 嵌套响应的解决方案。我将 FB.api 与嵌套请求一起使用，我得到了响应，没问题。

这是我从 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"
      }
    ],

我正在使用 React。我在父组件中进行了 APi 调用，如下所示：

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
  }

我将从 API 获得的数据作为道具传递给我的其他组件

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

问题就在这里。我无法访问 components

子项中的值数组中的值

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

    console.log(ins.insights);

我无法访问对象中的值。我不能比 this.props.insights 更深入当我尝试 this.props.insights.data 时，它不起作用。有人可以帮我弄清楚吗？谢谢

Answer 1

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

以上语句应该不起作用，因为setState 是异步的，不会同步更新值。可能显示旧状态值？

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.

您可能试图在 axios 完成之前访问 props.insights

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!

无法访问 Facebook Graph Api 响应的数据 - reactJs

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

javascript

reactjs

react-props