Utilizo el number useParams para obtener un número de una ruta de URL y una matriz de deck para obtener datos de una matriz de data que contiene 32 objetos con propiedades id y src (URL para imagen).

 // Images.js const data = [ { id:1, src:'https://###.com/###', }, //... const Images = () => { const {number} = useParams() const [deck, setDeck] = useState(data); //...

Luego uso useEffect para obtener el número de la ruta de la URL y la función setCards() para mostrar la cantidad adecuada de tarjetas en función de un número dado de la URL al eliminar los índices de number a deck.length . La función de shuffle() no importa aquí, solo coloca los objetos en un orden aleatorio.

 // Images.js useEffect(() => { fetch(`http://localhost:3000/play/${number}`).then(setCards(number)); }, [number]); const setCards = (number) => { let tempDeck = deck; tempDeck.splice(number, deck.length); shuffle(tempDeck); setDeck(tempDeck); };

También utilizo este fragmento de código para generar la cantidad adecuada de tarjetas desde la página web mediante el enrutamiento a la ruta URL adecuada:

 // Home.js <div className="btn-group"> <Link to="/play/8"> <button className="btn">8 cards</button> </Link> <Link to="/play/16"> <button className="btn">16 cards</button> </Link> <Link to="/play/24"> <button className="btn">24 cards</button> </Link> <Link to="/play/32"> <button className="btn">32 cards</button> </Link> </div>;

Cada vez que hago un renderizado inicial y, por ejemplo, selecciono el botón "24 cartas", todo está bien, 24 de 32 cartas se muestran como debería ser, pero cuando vuelvo a la "página principal" y selecciono un valor más alto de cartas en este En caso de que sean 32 desde el botón "32 tarjetas", el navegador mostrará solo 24 tarjetas en lugar de 32. ¿Cómo puedo solucionarlo?