Невозможно получить доступ к данным ответа Facebook Graph Api - PullRequest
Новая
       5

Невозможно получить доступ к данным ответа Facebook Graph Api

1 голос
/ 12 октября 2019

Я целый день пытался найти решение, как получить доступ к вложенному ответу 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"
      }
    ],

Я использую реагировать. Я сделал вызов 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>
......

Вот гдепроблема начала. Я не могу получить доступ к значению в массиве значений в моем дочернем элементе, что компоненты 

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, он не работает. Может ли кто-нибудь помочь мне разобраться? Thx

1 Ответ

0 голосов
/ 12 октября 2019 
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 () не изменяет немедленно this.state, но создает переход состояния ожидания. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение. Не гарантируется синхронная работа вызовов setState, и вызовы могут быть сгруппированы для увеличения производительности.

Возможно, вы пытаетесь получить доступ к props.insights до завершения axios 

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!
...