关于React “Cannot read property 'setState' of null” 的错误

最近刚跟着阮一峰大神的博客小小学习了一下React,想试着用ES6语法实现一个简单的按钮功能的时候出现了有个困扰了我一下午的错误: 
error截图

网上搜了好久stackoverflow上也没找到能完全解决问题的方案,最后还是在这里找到了解决方法: 
原来是ES6中 this 只能在构造函数中使用了,因此this.setState()这个函数也就不能直接调用了。这个新特性的目的暂时我还不清楚原因总之把解决方法记下先:

class OnlyBt extends React.Component {

  constructor(props) {
    super(props);
    /*关键就是这里,把要使用this的函数  在构造函数中用bind方法传入this*/
     this.start = this.start.bind(this);
     this.ready = this.ready.bind(this);
     this.ok = this.ok.bind(this);
     this.again = this.again.bind(this);
    this.state = {func : this.start, keyWord : keyWords[key]};
  }

  start() {
    key++;
    this.setState({func : this.ready, keyWord : keyWords[key]});
  }

  ready() {
    key++;
    this.setState({func : this.ok, keyWord : keyWords[key]});
  }

  ok() {
    key++;
    this.setState({func : this.again, keyWord : keyWords[key]});
  }

  again() {
    key = 0;
    this.setState({func : this.start, keyWord : keyWords[key]});
  }

  render() {
            return (<button className="btn btn-lg btn-default" onClick={this.state.func}>{this.state.keyWord}</button>);
        }
}
        ReactDOM.render(<OnlyBt />, document.getElementById('content'));

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值