Uncaught TypeError: Cannot read property 'setState' of null

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

韩鑫

2017-07-28

1、列表页显示的并不是5个,还是全部。

2、底部显示“点击加载更多”,点击出现Cannot read property 'setState' of null的错误

错误如下图

http://szimg.mukewang.com/597a98f70001343f11850697.jpg



mobile_list代码如下:

import React from 'react';
import {Row,Col} from 'antd';
import {Router,Route,Link,browserHistory} from 'react-router';
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){
       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
           })
       },2e3);
   }

   render(){

       var {hasMore,initializing,refreshAt}=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>
       );
   };
}

写回答

1回答

Parry

2017-07-28

是不是都安装了最新的版本造成了错误?

http://coding.imooc.com/learn/questiondetail/18756.html

0
0

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

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

2768 学习 · 2126 问题

查看课程