Este es un cambiador de color al reaccionar al presionar un botón. Pero un problema que enfrenta es que después de unos pocos clics, deja de funcionar. ¿Alguien puede ayudarme con esto?
import './App.css'; import React, {useState} from 'react'; import Button from './components/Button' function App() { const [color, setColor] = useState("yellow") const colorPalette = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC', '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399', '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933', '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF']; let randomNum = Math.floor(Math.random() * 50) return ( <div style = {{backgroundColor: color, height: 300}}> <button onClick = {() => setColor(colorPalette[randomNum])}>Click me to change color!</button> </div> ); } export default App;Problema
Funcionará hasta que haya una colisión. Se produce una colisión cuando el valor anterior en randomNum es el mismo que uno nuevo. Esto significa que el nuevo valor almacenado en el estado de color será el mismo que su estado anterior. Cuando el estado no cambia, React no volverá a procesar el componente App . Ahora, dado que la generación de números aleatorios depende de que el componente de la App se vuelva a representar, no se generará un nuevo valor para randomNum .
Ayuda pensar así: aquí el componente es una función, cada (re)renderizado es equivalente a llamar a esa función. Ahora, si no se llama a la función, randomNum no obtendrá un nuevo valor asignado. Eso, a su vez, no activará una nueva representación.
Solución
Genera un nuevo valor aleatorio con cada clic. Cree una función para hacer eso y llámela cada vez que haga clic en el botón. Demostración completa de trabajo aquí . Código de interés a continuación.
const genRandomNum = () => Math.floor(Math.random() * 50) return ( ... <button onClick={() => setColor(colorPalette[genRandomNum()])}> Click me to change color! </button> ...)En lugar de escribir el controlador de eventos en línea, cree una función separada para el controlador de eventos como se muestra a continuación
const handleClick = () => { let randomNum = Math.floor(Math.random() * 50); setColor(colorPalette[randomNum]); }; return ( <div style={{ backgroundColor: color, height: 300 }}> <button onClick={handleClick}>Click me to change color!</button> </div> );Por qué su código no funcionaba porque cuando la lógica del generador de números devuelve el mismo número, no se vuelve a procesar y debido a ese nuevo número no se generará
tiene 50 colores y un número aleatorio puede devolver 60 y, a cambio, pasará indefinido, primero, debe establecer el rango de su color aleatorio entre 0 y 49 para obtener el rango de color correcto
function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive }