为什么用了上拉加载插件报错,然后页面一开始就显示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
相似问题