当前组件的state.breaker值为false。捕获滚动事件时,它会查看,state如果有,它false会做一些事情。
state.breaker
state
false
我想在动作再次发生之前有某种静态延迟,这就是为什么将内部goTo函数state.breaker设置为true并将阻塞当前方法的进一步逻辑的原因,2s直到setTimeout返回到false。
goTo
true
2s
setTimeout
但在当前时刻出现以下错误 遗漏的类型错误:this.setState不是一个函数 时setState被内部调用setTimeout。
setState
class Slide extends Component { constructor(props) { super(props) this.state = { breaker: false } this.scrollRedirect = this.scrollRedirect.bind(this); } componentDidMount() { this.refs.holder.addEventListener('mousewheel', this.scrollRedirect); } scrollRedirect(e) { const path = this.props.location.pathname, goTo = (route) => { this.setState({breaker: true}); hashHistory.push(route); setTimeout(function () { this.setState({breaker: false}); }, 2000) }; if (!this.state.breaker) { ... code that executes goTo on condition } } ... render code }
您正在失去上下文。使用箭头功能作为保留适当执行上下文的简单方法:
setTimeout(() => { this.setState({breaker: false}); }, 2000)
请记住window,除非您将匿名函数与Function.prototype.bind明确绑定,否则匿名函数将在内部具有上下文。因此,这是解决此问题的另一种方法:
window
setTimeout(function () { this.setState({breaker: false}); }.bind(this), 2000)