Estoy haciendo una pregunta básica, pero soy un novato que ni siquiera pudo encontrar la respuesta en Google, así que sea amable 😉. Estoy tratando de usar setstate y no tengo idea de por qué mi estado continúa vacío. Aquí está el código:
import React, {Component} from 'react'; import Ball from './Ball' class Lottery extends Component{ constructor(props){ super(props); this.state = { nums : []}; this.RenderNums = this.RenderNums.bind(this); this.RenderNums(); } RenderNums(){ let ballnum = this.props.ballnum; let maxnum = this.props. maxnum; let arrnums = Array.from({length: ballnum}, () => Math.floor(Math.random() * maxnum) +1); console.log(arrnums); this.setState({nums : arrnums}); }Estoy tratando de poner mi matriz de números aleatorios en el estado, para eso estoy llamando a una función en el constructor, pero después de iniciar npm y mirar las herramientas de desarrollo, mis números de estado son una matriz vacía. La matriz de números aleatorios se crea muy bien y se imprime en la consola. ¿Alguien puede decir qué estoy haciendo mal mirando el código? Si es necesario intentaré ponerlo en codepen.
No debe llamar a setState ni a ningún efecto secundario en el constructor, como se menciona en los documentos :
No debe llamar a setState() en el constructor(). En cambio, si su componente necesita usar el estado local, asigne el estado inicial a this.state directamente en el constructor
En su lugar, asigne el estado inicial directamente o use un ciclo de vida dedicado, debe probar elcomponentDidMount .
class Lottery extends Component { constructor(props) { super(props); this.state = { nums: Array.from( { length: this.props.ballnum }, () => Math.floor(Math.random() * this.props.maxnum) + 1 ), }; } // or RenderNums = () => {...} componentDidMount() { this.RenderNums(); } }Pon this.RenderNums(); llamada dentro del método componentDidMount () {} .
class Lottery extends Component{ constructor(props){ super(props); this.state = { nums : []}; this.RenderNums = this.RenderNums.bind(this); //this.RenderNums(); } componentDidMount(){ this.RenderNums(); } RenderNums(){ let ballnum = this.props.ballnum; let maxnum = this.props. maxnum; let arrnums = Array.from({length: ballnum}, () => Math.floor(Math.random() * maxnum) +1); console.log(arrnums); this.setState({nums : arrnums}); }componentDidMount es equivalente a useEffect en componentes de funciones. no debe llamar a setState dentro de Constructor.