为什么用了上拉加载插件报错,然后页面一开始就显示10多条左右,而且点击加载更多也报错。我是和课程一步一步写的。

来源:19-1 点击加载更多-上拉刷新加载数据

xy36

2017-06-08

为什么用了上拉加载插件报错,然后页面一开始就显示10

多条新闻。我是和课程一步一步写的。

http://szimg.mukewang.com/593916440001c81e25541220.jpg

import React from 'react';
import {Row,Col} from 'antd';
import {Link} from 'react-router-dom';
import Tloader from 'react-touch-loader';

export default class MobileList extends React.Component {
    constructor() {
        super();
        this.state = {
            news: '',
            count:5,
            hasMore:0,
            initializing:1,
            refreshAt:Date.now()
        };
    }
    componentWillMount() {
        var myFetchOptions = {
            method: 'GET'
        };
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));
    };


    loadMore(resolve){ //resolve标志处理是否结束完成,已提醒加载的小圈圈关掉
        setTimeout(()=>{
            var count=this.state.count;
            this.setState({
                count:count+5,
            });

            var myFetchOptions = {
                method: 'GET'
            };
            fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.state.count, myFetchOptions)
                .then(response => response.json())
                .then(json => this.setState({news: json}));

                 this.setState({
                     hasMore:count>0&&count<50
                 });
                  resolve(); //告诉它这个过程做完了,不要再去刷新,小圈圈也消失了
        },2e3);
    };

    componentDidMount(){
        setTimeout(()=>{
            this.setState({
                hasMore:1,
                initializing:2    //标志成2说明所有的组件加载完成
            });
        },2e3);
    };


    render() {

        var {hasMore,refreshAt,initializing}=this.state;


        const {news} = this.state;
        const newsList = news.length
            ? news.map((newsItem, index) => (
            <section key={index} className="m_article list-item special_section clearfix">
                <Link to={`details/${newsItem.uniquekey}`}>
                    <div className="m_article_img">
                        <img src={newsItem.thumbnail_pic_s} alt={newsItem.title} />
                    </div>
                    <div className="m_article_info">
                        <div className="m_article_title">
                            <span>{newsItem.title}</span>
                        </div>
                        <div className="m_article_desc clearfix">
                            <div className="m_article_desc_l">
                                <span className="m_article_channel">{newsItem.realtype}</span>
                                <span className="m_article_time">{newsItem.date}</span>
                            </div>
                        </div>
                    </div>
                </Link>
            </section>
        ))
            : '没有加载到任何新闻';
        return (
            <div>
                <Row>
                    <Col span={24}>
                        <Tloader className="main" onLoadMore={this.loadMore.bind(this)} hasMore={hasMore} initializing={initializing}>
                            {newsList}
                        </Tloader>

                    </Col>
                </Row>
            </div>
        );
    };
}


写回答

2回答

Parry

2017-06-09

请认真阅读警告提示。

是一个版本升级的提示,是组件内部实现比较过时了,等下个版本升级即可。

0
0

xy36

提问者

2017-06-08

补充一下,就是上拉加载功能实现了,但那个警告一直在,不知道怎么解决

0
0

结合基础与实战学习React.js 独立开发新闻头条平台

轻松入门 React 开发,React Router 4 与 Webpack 2 完美升级项目

2768 学习 · 2126 问题

查看课程