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不支持promise。另外，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”，仅单引号...）

列出未呈现的数据

2 个答案: