关于this.setState is not a function 的报错解决

写项目的时候在实现组件内部功能的时候,用到了React的状态管理。然后报了个错。


报错.png

代码如下

componentDidMount() {
        window.onscroll = function () {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let clientHeight = document.documentElement.clientHeight;
            let style = scrollTop > clientHeight ? 'backTop show' : 'backTop';
            this.setState({ backStyle: style });
        }
    }

一打眼看真的没啥问题,没写成赋值的形式,也没多点啥,也没少点啥。
上网上一查,傻眼了。一定要注意this的作用域。
帮助解决的网站:# 倒计时功能,用setInterval设置每秒重设状态,报错this.setState is not a function

看一下this吧,打印出来:

componentDidMount() {
        window.onscroll = function () {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let clientHeight = document.documentElement.clientHeight;
            // let style = scrollTop > clientHeight ? 'backTop show' : 'backTop';
            // this.setState({ backStyle: style });
            console.log('window this:',this);
        }
        console.log('react this:',this);
    }

结果明显:


打印结果.png

Window对象里必然是没有setState方法的啊。果然是太不仔细了。这种低级错误。

解决方式就是:
1、使用ES6 箭头函数。
2、不是用箭头函数,在函数结尾 .bind(this)

总结起来就是,在React中尽量使用箭头函数,毕竟React本身就主要使用ES6 的语法。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,535评论 1 33
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 6,315评论 0 9
  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 3,604评论 1 11
  • 文/逗逗 图/摄图网 人与人之间,总是通过语言来沟通思想,而有些话,可能是说者无心,听者却有意,比如有些长辈不合...
    遇见逗逗阅读 247评论 0 1
  • 从2月11日开始,以老公偶有咳嗽,到我发烧咳嗽,同时老大老二持续发烧咳嗽,因劳累照顾大家而生病的婆婆,到17日,大...
    王俊婷阅读 310评论 0 0