关于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 的语法。