Me gustaría mostrar una matriz de tamaño variable mezclada con imágenes. El problema es que la matriz se baraja todas las veces cuando hago clic en una tarjeta. Me gustaría que la matriz se baraje solo una vez antes del juego, no después de cada clic en él.
<div className="card-container"> {deck .slice(0, numberOfCards * 2) .map((card, index) => ( <div className="card" onClick={() => cardClicked(index)}> <img src={"/images/cards/" + card.image} alt={card.name} className={ activeCards.indexOf(index) !== -1 ? "show" : "hide" } /> </div> )) .sort((a, b) => Math.random() - 0.5)} </div>suponiendo que su mazo es un estado en el componente, puede hacer algo como esto
const [deck, setDeck] = useState(props.deck) useEffect(() => { setDeck(deck => [...deck].sort((a, b) => Math.random() - 0.5)) }, []) return <div className="card-container"> {deck .slice(0, numberOfCards * 2) .map((card, index) => ( <div key={index} className="card" onClick={() => cardClicked(index)}> <img src={"/images/cards/" + card.image} alt={card.name} className={ activeCards.indexOf(index) !== -1 ? "show" : "hide" } /> </div> )) } </div>Se vuelve a barajar cada vez porque no persiste el estado de barajado y vuelve a ejecutar la lógica en cada renderizado.
Es posible que desee almacenar una lista de nombres de imágenes, o lo que sea apropiado en una variable de estado y confiar en eso para dictar el orden.
const [data, setData] = useState(); useEffect(() => { // your shuffle logic // setData() }, []) luego asigne sobre el objeto de datos. No olvides el accesorio key .