Я работаю над приложением responsejs, и у меня возникла проблема с доступом к состоянию внутри функции updateVert. Когда я нажимаю кнопку «play», вызывается actionButton, а изнутри actionButton вызывается updateVert.
Ниже мой фрагмент кода
updateVert() {
console.info("inside upver")
if (play) {
cancelAnimationFrame(this.updateVert);
return;
}
this.setState({xPos: this.state.xPos + 1}, ()=>{
if (this.state.xPos >= w) {
// stop animation...
this.setState({xPos:0, playing:false});
}
ctx.clearRect(0, 0, w, h);
// draw new one...
ctx.beginPath();
ctx.strokeStyle = "#19f";
ctx.lineWidth = 2;
ctx.moveTo(this.state.xPos, 0);
ctx.lineTo(this.state.xPos, 200);
ctx.stroke();
if (this.state.playing) {
console.info("yes true")
requestAnimationFrame(this.updateVert)
};
})
// reset rectangle content to erase previous line...
}
actionButton(){
if (this.state.playing) {
// pause...
this.setState({playing:false},()=>{
console.info(this.state.playing)
})
}
else {
this.setState({playing:!this.state.playing},()=>{
console.info(this.state.playing)
this.updateVert();
})
}
}
render() {
return (
<div>
<div className = "App">
<canvas id = "DemoCanvas" width = "500" height = "200"></canvas>
</div>
<button onClick = {this.actionButton.bind(this)}>{this.state.playing ? "Stop":"Play"}</button>
</div>
);
}
Когда я нажимаю кнопку (воспроизведение / пауза), я получаю сообщение об ошибке
TypeError: Cannot read property 'setState' of null
updateVert
src/App.js:45
42 | return;
43 | }
44 |
> 45 | this.setState({xPos: this.state.xPos + 1}, ()=>{
46 | if (this.state.xPos >= w) {
47 | // stop animation...
48 | this.setState({xPos:0, playing:false});
Я правильно указал функцию updateVert. Что я делаю не так?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Попробуйте привязать контекст конкретно в requestAnimationFrame
requestAnimationFrame(this.updateVert.bind(this))
Надеюсь это поможет
Я знаю это, но что это используется для привязки? Любая ссылка? Для меня это было бы новой находкой :)
Мое предположение заключалось в том, что сама функция не была объявлена с использованием нотации стрелочной функции, поэтому при вызове внутри requestAnimationFrame она теряла свой контекст. Как сказал Аншул, вы можете просто указать функцию как стрелочную функцию, или вы можете связать контекст в ней специально
Мне любопытно узнать, как requestAnimationFrame используется для привязки контекста. К вашему сведению, я не голосовал против.
К вашему сведению, я не голосовал против. - лол, мне плевать :). Как я уже сказал, это было просто мое предложение, нужно это проверить
Я как-то согласен. Но где вы нашли использование requestAnimationFrame для привязки контекста?
Вам не хватает привязки контекста this:
В ловушке actionButton(){ вы вызываете this.updateVert(), который не привязан к this. Таким образом свяжите его внутри конструктора:
this.updateVert.bind(this)
Он не получает правильный контекст this. Не нужно писать дополнительный код для привязки. Вам нужно изменить
updateVert() { .... }
к
updateVert = () => {.... }
requestAnimationFrame, что это?