寫(xiě)項(xiàng)目的時(shí)候在實(shí)現(xiàn)組件內(nèi)部功能的時(shí)候晾剖，用到了React的狀態(tài)管理。然后報(bào)了個(gè)錯(cuò)梯嗽。
報(bào)錯(cuò).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 });
}
}
一打眼看真的沒(méi)啥問(wèn)題齿尽，沒(méi)寫(xiě)成賦值的形式，也沒(méi)多點(diǎn)啥灯节，也沒(méi)少點(diǎn)啥循头。
上網(wǎng)上一查，傻眼了显晶。一定要注意this的作用域贷岸。
幫助解決的網(wǎng)站：# 倒計(jì)時(shí)功能，用setInterval設(shè)置每秒重設(shè)狀態(tài)磷雇，報(bào)錯(cuò)this.setState is not a function
看一下this吧偿警，打印出來(lái)：
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);
}
結(jié)果明顯：
打印結(jié)果.png
Window對(duì)象里必然是沒(méi)有setState方法的啊。果然是太不仔細(xì)了唯笙。這種低級(jí)錯(cuò)誤螟蒸。
解決方式就是：
1、使用ES6 箭頭函數(shù)崩掘。
2七嫌、不是用箭頭函數(shù)，在函數(shù)結(jié)尾 .bind(this)
總結(jié)起來(lái)就是苞慢，在React中盡量使用箭頭函數(shù)诵原，畢竟React本身就主要使用ES6 的語(yǔ)法。
