O problema é o seguinte: estou tentando construir um contador pra praticar o meu React
e ocorreu um erro:
this is undefined
Eu criei um state pra guardar os minutos e os segundos:
constructor(props) {
super(props)
this.state = {
min: 0,
seg: 0,
}
}
Chamei os dois lá no meu render:
render() {
const { min, seg } = this.state;
return (
<React.Fragment>
<p>{min}:{seg}</p>
<button onClick={this.startCountdown}>Start</button>
<button>Stop</button>
<button>Reset</button>
</React.Fragment>
)
}
e depois e fui criar a função para iniciar a contagem. Vejam, à princípio eu não quero a lógica de decrementação, eu tava tentando simplesmente mudar os valores na tela ao clicar em startCowndown
, mas eu tive o retorno do erro this is undefined
.
A minha função pra mudar os valores na tela ficou assim:
startCountdown () {
let {min, seg} = this.state;
this.setState({min: 1, seg: 59})
}
Bem, não funcionou, então eu achei que seria desnecessário chamar min e seg com o destructuring já que eu já estava usando o método setState
, então tirei.
startCountdown(){
this.setState({min: 1, seg: 59})
}
e mesmo assim this is undefined continua a aparecer.
Alguém poderia me explicar o porquê desse comportamento?
<button onClick={() => this.startCountdown}>Start</button>
e no métodostartCountdown () => {...
startCountdown () => { this.setState({min: 1, seg: 59}) }