Javascript Can';t访问Facebook Graph Api response-reactJs的数据
我花了一整天的时间试图找到一个如何访问Facebook的解决方案。 我将FB.api与一个嵌套请求一起使用,得到了响应,一切正常 下面是我从Facebook Graph Api获得的响应示例Javascript Can';t访问Facebook Graph Api response-reactJs的数据,javascript,reactjs,react-props,Javascript,Reactjs,React Props,我花了一整天的时间试图找到一个如何访问Facebook的解决方案。 我将FB.api与一个嵌套请求一起使用,得到了响应,一切正常 下面是我从Facebook Graph Api获得的响应示例 { "insights": { "data": [ { "name": "page_fan_adds_unique", "period": "month", "values": [ { "va
{
"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>
......
class GlobalPerf extends Component {
render() {
const ins = this.props.insights; // I can't go deeper than that.
console.log(ins.insights);
我无法访问对象中的值。我不能再深入了。道具
当我尝试这个.props.insights.data时,它不起作用。有人能帮我弄清楚吗?Thx
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调用的同步操作,并且可能会对调用进行批处理以提高性能
在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!
谢谢达南贾。我找到了一种方法,在我发出请求的组件中设置我的所有状态,然后将它们作为道具传递给其他组件。很好用。