Estoy tratando de crear una función de conteo en la que quiero que el contador aumente en 1 cuando el usuario haga clic en el botón, pero el código se compila correctamente y la aplicación de reacción muestra una página en blanco.
Aplicación.js:
import './App.css'; import Count from './Components/Counter'; function App() { return ( <div className='App'> <Counter></Counter> </div> ); } export default App;Counter.js (dentro de la carpeta src/Components):
import React, {Component} from "react"; class Counter extends Component{ constructor(){ super(); this.state({ count:0 }); } count(){ this.setState({ count : this.state.count + 1 } ); } render(){ return( <div> <h1> {this.state.count} </h1> <button onClick={() => {this.count()}}>Increase Count</button> </div> ); } } export default Counter;ACTUALIZAR:
Errores en la consola:
Uncaught TypeError: this.state is not a function at new Counter (Counter.js:6:1) at constructClassInstance (react-dom.development.js:12709:1) at updateClassComponent (react-dom.development.js:17425:1) at beginWork (react-dom.development.js:19073:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at beginWork$1 (react-dom.development.js:23964:1) at performUnitOfWork (react-dom.development.js:22776:1) at workLoopSync (react-dom.development.js:22707:1) The above error occurred in the <Counter> component: at Counter (http://localhost:3000/static/js/bundle.js:109:5) at div at App Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.El error le dice: this.state no está definido. Primero debe definir eso en su clase:
import React, { Component } from "react"; class Count extends Component { state = { count: 0 }; count() { this.setState((prevState) => ({ ...prevState, count: (prevState.count += 1) })); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={() => { this.count(); }} > Increase Count </button> </div> ); } } export default Count; Cuando se trata de cosas como incrementar valores, también tome nota de cómo cambié setState . Para protegerse contra otras cosas que también pueden cambiar el estado y desincronizar su incrementador, probablemente querrá acceder al estado anterior justo antes de cambiarlo en la devolución de llamada. De esta manera, si algo más cambia el conteo antes de que se actualice el estado, se asegurará de que tenga el último contador al agregarlo.
Hay un TypeError this.state no es una función
constructor(){ super(); this.state({ count:0 }); }
Necesita ser:
constructor(){ super(); this.state = { count: 0 }; }