Estoy tratando de escribir una función para obtener un color aleatorio de una matriz de COLORES. Pero, el problema es que en lugar de devolver un solo color, está devolviendo demasiados colores, lo que resulta en un error infinito. Dando como resultado que la reacción arroja demasiados errores de renderizado. ¿Qué pasa con mi código?
const COLORS = [ "#FFAEBC", "#1ec891", "#ff725e", "#ffd05b", "#A0E7E5", "#5885AF", ]; const DisplaySubject = (props) => { const [randomColor, setRandomColor] = useState(""); const generateRandomColor = (colors) => { let randColorIndex, randColor; for (let i = 0; i < colors.length; i++) { randColorIndex = Math.floor(Math.random() * colors.length); randColor = colors[randColorIndex]; return randColor; } console.log(randColor); setRandomColor(randColor); }; generateRandomColor(COLORS); console.log("random color state :", randomColor); return ( <div> Let's get started </div> ); }; export default DisplaySubject;Primero, arregle su función de generador de color:
const generateRandomColor = (colors) => { const randColorIndex = Math.floor(Math.random() * colors.length); return colors[randColorIndex]; }; Luego puede usarlo como el valor inicial para useState :
const DisplaySubject = (props) => { const [randomColor, setRandomColor] = useState(generateRandomColor(COLORS)); return ( <div style={{ backgroundColor: randomColor }}> Let's get started </div> ); }; El problema era llamar a setRandomColor dentro de la función getRandomColor , lo que provocaba un ciclo de renderizado infinito.
No necesita iterar a través de la matriz para obtener un elemento aleatorio. Cambia tu función así:
const generateRandomColor = (colors) => { let randColorIndex, randColor; randColorIndex = Math.floor(Math.random() * colors.length); randColor = colors[randColorIndex]; console.log(randColor); setRandomColor(randColor); return randColor; }; Y se llama a la función cada vez que se vuelve a renderizar el componente. Entonces llame a la función en un evento como onClick o si desea ejecutar la función solo una vez cuando el componente se muestra por primera vez, use useEffect :
useEffect(() => generateRandomColor(COLORS), [])Cada vez que su componente se monta, se llama a la función generateRandomColor() y luego actualiza el estado que provoca un nuevo renderizado.
Como opción, puede crear un botón y llamar a esta función con el evento onClick :
<button onClick={generateRandomColor(COLORS)}>generate a color</button>