为什么用了上拉加载插件报错,然后页面一开始就显示10多条左右,而且点击加载更多也报错。我是和课程一步一步写的。
来源:19-1 点击加载更多-上拉刷新加载数据
xy36
2017-06-08
为什么用了上拉加载插件报错,然后页面一开始就显示10
多条新闻。我是和课程一步一步写的。
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
请认真阅读警告提示。
是一个版本升级的提示,是组件内部实现比较过时了,等下个版本升级即可。
00 -
xy36
提问者
2017-06-08
补充一下,就是上拉加载功能实现了,但那个警告一直在,不知道怎么解决
00
相似问题