List not rendering data - reactjs

Question

I'm rendering a list of unread messages from facebook, it was working just fine last time I opened it, now it wouldn't render anything even though I'm getting a response from facebook !
import React, {Component} from 'react';
import { List, Button, Avatar, Icon } from 'antd';
const IconText = ({ type, text }) => (
<span>
<Icon type={type} style={{ marginRight: 8 }} />
{text}
</span>
);
class Notifications extends Component {
constructor(props) {
super(props);
this.state={
initLoading: true,
loading: false,
UnreadMessages:[],
pageAccessToken:""
};
}
componentWillMount(){
window.FB.api(
'/me',
'GET',
{"fields":"conversations{unread_count,messages{from,message}}","access_token":this.state.pageAccessToken},
function(response) {
console.log(response)
if (response.conversations) {
let listData = [];
for (let i = 0; i < response.conversations.data.length; i++) {
if(response.conversations.data[i].unread_count!==0){
listData.push({
from:response.conversations.data[i].messages.data[0].from.name,
message: response.conversations.data[i].messages.data[0].message,
})
}else i++;
}
this.setState({ UnreadMessages: listData });
}
else {
console.log(response.error);
}
}.bind(this)
);
}
render() {
const {UnreadMessages } = this.state;
return (
<div>
<List
itemLayout="horizontal"
dataSource={UnreadMessages}
loading={UnreadMessages.length ? false : true}
renderItem={item => (
<List.Item
actions={[<IconText type="facebook" />, <IconText type="message" />]}
>
<List.Item.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={item.from}
description={item.message}
/>
</List.Item>
)}
/>
</div>
);
}
}
export default Notifications;
I really couldn't find the issue, I used the same structure for another list and it works just fine !

Answer 1

Try this code. I think the issue is in handling response directly inside window.FB.api call, so this.setState is not setting the state ,because this is not referring to the component.
componentWillMount(){
window.FB.api(
'/me',
'GET',
{"fields": "conversations{unread_count,messages{from,message}}", "access_token": this.state.pageAccessToken})
.then( (response) => {
console.log(response)
if (response.conversations) {
let listData = [];
for (let i = 0; i < response.conversations.data.length; i++) {
if(response.conversations.data[i].unread_count!==0){
listData.push({
from:response.conversations.data[i].messages.data[0].from.name,
message: response.conversations.data[i].messages.data[0].message,
})
}else i++;
}
this.setState({UnreadMessages: listData });
} else { console.log(response.error) }
})

Answer 2

Updated Version with arrow function to solve context issue - FB.api does not support promises, unfortunately. Also, else i++ does not make sense, i will get increased in the loop anyway:
componentWillMount() {
const {pageAccessToken} = this.state;
window.FB.api(
'/me',
{fields: 'conversations{unread_count,messages{from,message}}', access_token: pageAccessToken}, (response) => {
console.log(response);
if (response.conversations) {
let listData = [];
for (let i = 0; i < response.conversations.data.length; i++) {
if (response.conversations.data[i].unread_count !== 0) {
listData.push({
from: response.conversations.data[i].messages.data[0].from.name,
message: response.conversations.data[i].messages.data[0].message,
});
}
}
this.setState({UnreadMessages: listData});
} else {
console.log(response.error);
}
});
}
I´ve also improved some stuff (missing semicolons, unneccessary "GET", only single quotes, ...)