• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

90
Vistas
Ordenar una matriz en React después de cada problema de clic

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>
about 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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>
about 3 years ago · Juan Pablo Isaza Denunciar

0

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 .

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda