Estoy usando useState en React. Después de x cantidad de tiempo (15-20), la función getRandomNumbers ya no da números aleatorios. Da sólo un número una y otra vez.
¿¿¿Qué estoy haciendo mal aquí???
import {useState} from "react"; function App() { const [numbers, setNumbers] = useState(['1','2','3','4', '5']); function getRandomNumbers(){ let result = []; for(let i = 0; i < numbers.length; i++){ result.push(numbers[Math.floor(Math.random() * numbers.length)]); } // setting new array in numbers setNumbers(numbers => result); } const displayNumbers = numbers.map((no, i) => { return ( <div key={i}>{no}</div> ); }); return ( <div> {displayNumbers} <br/> <button type='button' onClick={() => getRandomNumbers()}>Click</button> </div> ); } export default App;necesita sacar el rango de valores permitidos
Imagine que después del primer clic habrá varios números idénticos en la matriz, por ejemplo [1, 1, 1, 5, 3] La probabilidad de sacar un 1 es mucho mayor que un 3 o un 5 .
enlace de solución --> https://codesandbox.io/s/cool-cache-09xkid?file=/src/App.js
También publique la solución aquí:
import { useState } from "react"; const allowedNumbers = ["1", "2", "3", "4", "5"]; function App() { const [numbers, setNumbers] = useState(Array.from(allowedNumbers)); function getRandomNumbers() { let result = []; for (let i = 0; i < numbers.length; i++) { result.push(allowedNumbers[Math.floor(Math.random() * allowedNumbers.length)]); } // setting new array in numbers setNumbers((numbers) => result); } const displayNumbers = numbers.map((no, i) => { return <div key={i}>{no}</div>; }); return ( <div> {displayNumbers} <br /> <button type="button" onClick={() => getRandomNumbers()}> Click </button> </div> ); } export default App;