este es mi codigo
import React, { Component } from 'react'; class Rando extends Component { constructor(props) { super(props); // want to use props insode brackets if we want to use props inside the constructor this.state = { num: 0, color: 'purple' }; this.makeTimer(); } makeTimer() { setInterval(() => { let rand = Math.floor(Math.random() * this.props.maxNum); this.setState({ num: rand }); }, 10); } render() { console.log('changing'); return ( <div className=''> <h1>{this.state.num}</h1> </div> ); } } export default Rando;Estoy recibiendo una advertencia que se ve así
index.js:1 Advertencia: No se puede llamar a setState en un componente que aún no está montado. Esto no es operativo, pero podría indicar un error en su aplicación. En su lugar, asigne a this.state directamente o defina un state = {}; propiedad de clase con el estado deseado en el componente Rando.
Soy un principiante, no tengo idea de qué está causando esto. por favor, ayúdame. Gracias por adelantado
Su función de temporizador se ejecuta incluso antes de que se monte el componente. Intente poner el código dentro del gancho componentDidMount . Además, no olvide borrar la identificación del intervalo dentro componentWillUnmount .
Enlace de Sandbox para su referencia: https://codesandbox.io/s/react-basic-class-component-forked-sybv0?file=/src/index.js
Fragmento modificado
import React, { Component } from 'react'; class Rando extends Component { constructor(props) { super(props); this.state = { num: 0, color: 'purple' }; this.timer = null; } componentDidMount() { this.makeTimer(); } componentWillUnmount() { clearInterval(this.timer); } makeTimer = () => { this.timer = setInterval(() => { let rand = Math.floor(Math.random() * this.props.maxNum); this.setState({ num: rand }); }, 10); } render() { return ( <div> <h1>{this.state.num}</h1> </div> ); } } export default Rando;Deberías llamar a this.makeTimer(); en componentDidMount() en lugar de constructor
componentDidMount(){ this.makeTimer(); }Prueba este código
import React, { Component } from 'react'; class Rando extends Component { constructor(props) { super(props); // want to use props insode brackets if we want to use props inside the constructor this.state = { num: 0, color: 'purple' }; this.makeTimer((data) => { this.setState(data); }); } makeTimer(cb) { setInterval(() => { let rand = Math.floor(Math.random() * this.props.maxNum); cb({ num: rand }) }, 10); } render() { console.log('changing'); return ( <div className=''> <h1>{this.state.num}</h1> </div> ); } } export default Rando;