Estoy tratando de mostrar el recuento por clic con el botón, pero me encontré con un problema con mi código. Cuando ejecuto mi código, no se compila, pero cuando inspecciona la página, puede ver la hora que se muestra. Aquí está mi código.
import React from 'react' export default class Profile extends React.Component{ constructor(){ super(); this.state={ name:'Abdur Rehman', email: 'abdur@gmail.com', count: 0, } } test(){ this.setState({ name: 'Jamal', email: 'jamal123@gmail.com', count: count+1 } ) } render(){ return( <div> <h1>hello {this.state.name}</h1> <h1>Email: {this.state.email}</h1> <h1>Count: {this.state.count}</h1> <button onClick={()=>{this.test()}}>Update Name</button> </div> ); } }No estoy seguro de por qué no se compilaría, pero puedo detectar un error lógico en su método de prueba.
count: count+1debiera ser:
count: this.state.count+1o mejor aún:
count: this.state.count++Esto se debe a que debe recordar hacer referencia a la instancia del perfil de la clase mediante la palabra clave "this". Esto es necesario porque cualquier asignación debe hacer referencia a la ruta explícita en la que se almacena la variable de conteo, es decir, this.state.count.
a ver si te sirve de algo :)
importe el estado anterior, tampoco mute la variable this.state fuera de la función constructor , use this.setState en la función de prueba, esto también volverá a representar el componente
import React from 'react' export default class Profile extends React.Component{ constructor(){ super(); this.state={ name:'Abdur Rehman', email: 'abdur@gmail.com', count: 0, } } test(){ this.setState({ ...this.state, name: 'Jamal', email: 'jamal123@gmail.com', count: this.state.count + 1 } ) } render(){ return( <div> <h1>hello {this.state.name}</h1> <h1>Email: {this.state.email}</h1> <h1>Count: {this.state.count}</h1> <button onClick={()=>{this.test()}}>Update Name</button> </div> ); } }