Estaba tratando de actualizar mi variable de estado cuando se hace clic en el botón en mi página. Pero veo que no puedo usar los métodos de componentes de la clase de reacción. Aquí está el ejemplo mínimo reproducible.
import React, { Component } from 'react' export class Name extends Component { constructor(){ super(); this.state = { name : "Farhan Ahmed" } } clickMe() { this.setState({ name:"Ahmed Farhan" }) } render() { return ( <div> <h1>{this.state.name}</h1> <button className="btn btn-success" onClick={this.clickMe}>Change Text</button> </div> ) } } export default NameError :
TypeError: Cannot read properties of undefined (reading 'setState')Pero cuando reemplazo lo mismo con la función de flecha, funciona para mí.
Mi pregunta es por qué no funcionó el método de clase regular en este caso, ¿por qué necesito reemplazarlo con la función de flecha?
No se hace clic en el botón, pero la función se ejecutará mientras se procesa el componente.
onClick={this.clickMe}Y esto;
onClick={() => this.clickMe}La función solo funciona cuando se hace clic en los botones.
Lea esto: https://beta.reactjs.org/learn/responding-to-events
Cuando intenta acceder a this palabra clave sin vincular la función, this palabra clave no está definida. por lo tanto, debe vincular esa función en el constructor o usar una sintaxis de función de flecha que garantice this esté vinculada dentro de esa función. Puede consultar la documentación del método de vinculación y la función de flecha
En los documentos que se encuentran aquí https://reactjs.org/docs/handling-events.html se explica este error, junto con las posibles soluciones. Si no está utilizando la "sintaxis de campos de clase pública" experimental a la que se refieren los documentos, puede bind su función o usar una función de flecha:
con enlace
onClick={this.clickMe.bind(this)}
Función de flecha
onClick={() => this.clickMe()}
Estos son los más comunes (que he visto personalmente), pero los documentos también brindan más soluciones.
Editar
Alguien señaló que OP está preguntando "por qué", no necesariamente "¿cómo lo soluciono?" Entonces, de los documentos vinculados anteriormente:
Debe tener cuidado con el significado de
thisen las devoluciones de llamada JSX. En JavaScript, los métodos de clase no están vinculados de forma predeterminada. Si olvida enlazarthis.handleClicky pasarlo aonClick,thisestará definido cuando se llame a la función.
Este no es un comportamiento específico de React; es una parte de cómo funcionan las funciones en JavaScript. Por lo general, si hace referencia a un método sin () después, como
onClick={this.handleClick}, debe vincular ese método.