Список не рендеринг данных

Question

Я отображаю список непрочитанных сообщений с Facebook, в прошлый раз, когда я его открывал, все работало нормально, теперь ничего не отображается, хотя я получаю ответ от 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;

Я действительно не смог найти проблему, я использовал ту же структуру для другого списка, и она прекрасно работает!

Answer 1

Попробуйте этот код.Я думаю, что проблема заключается в обработке ответа непосредственно внутри вызова window.FB.api, поэтому this.setState не устанавливает состояние, потому что this не относится к компоненту.

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

Обновленная версия с функцией стрелки для решения проблемы контекста - FB.api, к сожалению, не поддерживает обещания. Кроме того, else i++ не имеет смысла, i будет увеличиваться в цикле в любом случае:

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);
            }
        });
}

Я также улучшил некоторые вещи (пропущенные точки с запятой, ненужные "GET", только одинарные кавычки, ...)