Este es un código que muestra qué hora es.
Configuro state en new Date() y doy setState() new Date() como parámetro.
class Clock extends Component { constructor(props) { super(props) this.state = new Date() } componentDidMount() { this.timerID = setInterval(()=> this.tick(), 1000) } componentWillUnmount() { clearInterval(this.timerID) } tick() { this.setState(new Date()) } render() { return ( <div> <h2>It is {this.state.toLocaleTimeString()}.</h2> </div> ) } } ReactDOM.render(<Clock />, document.getElementById('root'));Ejecutando código, obteniendo un error como el siguiente
TypeError: this.state.toLocaleTimeString no es una función
Clock.render 29 | return ( 30 | <div> 31 | <h1>Hello, world!</h1> > 32 | <h2>It is {this.state.toLocaleTimeString()}.</h2> | ^ 33 | </div> 34 | ) 35 |No puedo entender cuál es el problema.
¿Cómo podría arreglarlo?
No está usando ninguna clave para almacenar/actualizar el estado, lo que está causando este error, ya que React no encuentra nada para actualizar. He usado la date clave para almacenar y actualizar el estado cada segundo.
Entonces, el estado será
this.state = { date: new Date() };y la actualización de la función tick.
tick() { this.setState({ date: new Date() }); }y también la parte de representación para usar la clave de estado.
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>Su código actualizado debe ser algo como a continuación.
import { render } from "react-dom"; import React from "react"; class Clock extends React.Component { constructor(props) { super(props); this.state = { date: new Date() }; } componentDidMount() { this.timerID = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { console.log(this.state); return ( <div> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } const rootElement = document.getElementById("root"); render(<Clock />, rootElement);React docs tiene información útil sobre la administración del estado y otros temas relacionados, que definitivamente debería echar un vistazo para comprender cómo funciona el estado y vuelve a renderizar la interfaz de usuario en consecuencia.
Intenta usar this.state = {date: new Date()}; en las declaraciones de su estado en su lugar.