1

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?

5
  • 2
    faltou a arrow function. <button onClick={() => this.startCountdown}>Start</button> e no método startCountdown () => {...
    – Marconi
    28/02/2020 às 19:00
  • 1
    e outra não precisa fazer o descruct, método correto startCountdown () => { this.setState({min: 1, seg: 59}) }
    – Marconi
    28/02/2020 às 19:03
  • 1
    Dá uma olhadinha com hooks codesandbox.io/s/epic-hugle-hq4x5
    – Marconi
    28/02/2020 às 19:38
  • as soluções de vocês estão perfeitas, mas nenhuma funcionou nem funcionaria mesmo, justamente porque eu estava chamando a função onClick não numa tag, mas no componente Button. <Button onClick={startPomodoro}/> Depois que eu fiz a chamada dentro da tag todas as soluções apresentadas passaram a funcionar. 29/02/2020 às 22:31
  • que contradição.
    – novic
    29/02/2020 às 22:38

2 Respostas 2

1

Porque o erro aconteceu?

Quanto você trabalha com classes em react, os métodos em react precisam dizer em qual contexto pertence e com bind(this) resolve esse problema. Existe formas de resolver isso, um delas é pelo constructor ou até mesmo fazer no próprio botão ou componente, exemplo:

class Source extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
    this.handleIncrement = this.handleIncrement.bind(this);
  }
  handleIncrement() {
    const count = this.state.count + 1;
    this.setState({ count });
  }
  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}
ReactDOM.render( <Source/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

ou no próprio onClick:

class Source extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };    
  }
  handleIncrement() {
    const count = this.state.count + 1;
    this.setState({ count });
  }
  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.handleIncrement.bind(this)}>Increment</button>
      </div>
    );
  }
}
ReactDOM.render( <Source/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

ou até declara uma função anônima que simplifica e não tem que utilizar o bind(this):

class Source extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };  
  }
  handleIncrement = () => {
    const count = this.state.count + 1;
    this.setState({ count });
  }
  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}
ReactDOM.render( <Source/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

No seu código eu faria assim:

class Source extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        min: 0,
        seg: 0,
    }
    this.startCountdown =
      this.startCountdown.bind(this);
  }
  startCountdown () {
    let {min, seg} = this.state;
    this.setState({min: 1, seg: 59})
  }
  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>
    )
}
}
ReactDOM.render( <Source/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Pronto funcionou.

No atual momento utilizamos mais Hooks que simplifica esse processo dê uma olhada na sintaxe escrita por essa resposta

0

Antônio,

Estranho ocorrer erro dizendo que o contexto this está indefinido. Precisava ver o código completo.

No entanto, fiz um sandbox implementando exatamente o que você deseja atingir, você pode dar uma analisada e verificar o que pode esta errado.

https://codesandbox.io/s/contador-eops1

Uma coisa importante a se lembrar é o fato de usar o bind. Para que uma function dentro de uma classe tenha o mesmo contexto da classe, para ter acesso ao state, por exemplo, é necessário utilizar um método chamado bind.

Veja só o código dentro do construtor:

constructor(props) {
 super(props);
 this.startCountdown = this.startCountdown.bind(this);
}

state = {
 min: 0,
 seg: 0
};

startCountdown() {
 this.setState({ min: 1, seg: 59 });
}

O código está funcionando agora.

Qualquer dúvida, comente essa resposta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .