"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Por que “this” está indefinido dentro de uma função do componente React?

Por que “this” está indefinido dentro de uma função do componente React?

Publicado em 23/01/2025
Navegar:926

Why is

React: "this" é indefinido dentro de uma função de componente

Ao trabalhar com componentes no React, você pode encontrar o erro "isto é indefinido" dentro de uma função definida no componente. Isso pode ser confuso, pois, de acordo com a documentação oficial, deve referir-se à instância do componente. Então, por que esse erro ocorre?

O problema está na maneira como o React inicializa os componentes da classe. Ao contrário das classes ES5 antigas, os componentes ES6 React não vinculam automaticamente métodos de classe à instância. Isso significa que se você tiver uma função definida dentro de um componente, como um manipulador de eventos, isso dentro dessa função não se referirá ao componente.

Para resolver isso, você precisa vincular manualmente o método ao componente instância no construtor. Veja como você faria isso no seu exemplo:

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

Ao vincular o método onToggleLoop ao componente no construtor, você garante que this se refira ao componente quando o método for chamado a partir do manipulador de eventos. Isso permite que você acesse o estado e os adereços do componente dentro do método.

Lembre-se de vincular quaisquer métodos de classe que precisem de acesso à instância do componente no construtor para evitar o erro "isto é indefinido".

Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3