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

Question

以下是我的代码，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

Answer 1

Parry 2017-08-27 23:15:18

知道你哪里错了。

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

• 提问者 觅渡qhy #1

  谢谢老师继续关注我的问题，我改了，已经上传到第一个图片了，还是报错，原因一样，还有请问下老师我在定时器里面使用箭头函数，他的指向不是指向父级了吗（也就是不用bind了吧）？

• 提问者 觅渡qhy #2

  对了，老师我在loadmore的时候console.log和alert都没有反应

• Parry 回复 提问者 觅渡qhy #3

  那就是完全函数没有执行吧。

Answer 2

提问者 觅渡qhy 2017-08-22 01:19:00

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

• Parry #1

  你删除 node_modules 文件夹，然后重新执行 npm install 试试。

• 提问者 觅渡qhy 回复 Parry #2

  还是不行，报错是一样的 。。。有没有其他的插件能代替吗

Answer 3

Parry 2017-08-21 12:54:15

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

var { refresh, loadMore, toggleCanReresh } = this;

• 提问者 觅渡qhy #1

  好好听了，上面95行有啊

• Parry 回复 提问者 觅渡qhy #2

  啊，对不起，我看漏了，看起来又像是源码的错误，你要不试试重新执行 npm install 试试重新加载包，不行直接拷贝我代码贴进去测试下看看行不行？
  源码地址：https://github.com/ParryQiu/IMOOC-React

Answer 4

提问者 觅渡qhy 2017-08-20 23:09:40

源码的错误 在130083行

• 慕先生3252166 #1

  我也是这个问题，老师怎么不解答呢

• 慕先生3252166 #2

  就是那个react-touch-loader安装版本的原因，老师的那个是1.1.0，我安装的这个是1.1.1，直接在node_modules文件夹里将这个包替换成老师文件夹里的react-touch-loader就成了