老师您好,其他的问题都解决了,就是点击加载更多的时候报错!说loadMore里面的setState的属性是null

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

觅渡qhy

2017-08-20

http://szimg.mukewang.com/59a37e3b000125e403980561.jpghttp://szimg.mukewang.com/5999a2b1000199f511830894.jpg

以下是我的代码,loadMore连1都不弹出来,老师请问下这个会是哪里的问题呢?

import React,{Component} from 'react';
import { Card,Row,Col } from 'antd';
import {BrowserRouter as Router,Route,hashHistory,Link} from 'react-router-dom';
import  '../css/mobile.less';
import Tloader from 'react-touch-loader';

class MoblieList extends Component{
  constructor(){
    super();
    this.state={
      news:'',
      count:5,
      hasMore:0,
      initializing:1,
      canRefreshResolve:1,
      refreshedAt: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 =>{
      console.log(json);
      this.setState({news: json})
    });
    }
    //加载
loadMore(resolve){
  alert(1)
  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({
        hasMore:count>0&&count<50
      });

    });
    resolve();
  },2e3)
};
componentDidMount(){
  setTimeout(()=>{
      this.setState({
        hasMore:1,
        // 初始化完成
        initializing:2
      })
  },2e3)
}
refresh=(resolve, reject)=>{
  alert('refresh')
}
toggleCanReresh(){
  this.setState({canRefreshResolve:!this.state.canRefreshResolve});
}
  render(){
    const {news}=this.state;
    let newsList=news.length?
    news.map((e,i)=>{
      return(
        <section key={i} className="m_article list-item special_section clearfix">
            <Link to={`/details/${e.uniquekey}`} className="clearfix">
            <div className="m_article_img">
                <img src={e.thumbnail_pic_s} alt={e.title} />
            </div>
            <div className="m_article_info">
               <div className="m_article_desc clearfix">
               <div className="m_article_title">
                   <span>{e.title}</span>
                </div>
                  <div className="m_article_desc_l">
                      <span className="m_article_channel">{e.realtype}</span>
                      <span className="m_article_time">{e.date}</span>
                  </div>
               </div>
            </div>
            </Link>
        </section>)})
    :
    '没有加载到任何新闻'
    var { hasMore, initializing, refreshedAt, canRefreshResolve } = this.state;
    var { refresh, loadMore, toggleCanReresh } = this;
    return(
      <div className="topNewsList">
        <Row span={24}>
          <Tloader className="main" autoLoadMore={true} onRefresh={this.refresh}  
          onLoadMore={this.loadMore.bind(this)}
                   hasMore={hasMore} initializing={initializing}>
            {newsList}
          </Tloader>
        </Row>
      </div>
    )
  }
}
export default MoblieList


写回答

4回答

Parry

2017-08-27

知道你哪里错了。

setTimeout(function () {
 this.setState({count:count+5});}.bind(this), 2000)
应该是这样写,你好好理解 this 的作用域。

0
3
Parry
回复
觅渡qhy
那就是完全函数没有执行吧。
2017-08-28
共3条回复

觅渡qhy

提问者

2017-08-22

//szimg.mukewang.com/599b15540001836607710779.jpg

我用的是cli脚手架配置的,会不会less没有加上,但是我执行 npm-watch的时候less会编译成css文件。。。样式好像也没问题,如果这个插件不行,还有其他办法能解决吗?有没有其他的插件可以代替这个的?

0
2
觅渡qhy
回复
Parry
还是不行,报错是一样的 。。。有没有其他的插件能代替吗
2017-08-25
共2条回复

Parry

2017-08-21

你没有认真看课程,你看我写的有一行

var { refresh, loadMore, toggleCanReresh } = this;

0
2
Parry
回复
觅渡qhy
啊,对不起,我看漏了,看起来又像是源码的错误,你要不试试重新执行 npm install 试试重新加载包,不行直接拷贝我代码贴进去测试下看看行不行? 源码地址:https://github.com/ParryQiu/IMOOC-React
2017-08-22
共2条回复

觅渡qhy

提问者

2017-08-20

//szimg.mukewang.com/5999a5ff000162b006050432.jpg

源码的错误 在130083行

0
2
慕先生3252166
就是那个react-touch-loader安装版本的原因,老师的那个是1.1.0,我安装的这个是1.1.1,直接在node_modules文件夹里将这个包替换成老师文件夹里的react-touch-loader就成了
2017-08-31
共2条回复

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

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

2768 学习 · 2126 问题

查看课程