<div className=" row pt-3 pr-3 pl-3 "> {
shuffleArray(array).map((respuestasv)=>(
<div key={respuestasv.id} className="col-md-6 ">
<button type="button"
onClick={(e) =>handleClickedVideo(e,respuestasv)}
className="btn btn-block btn-light btn-sm mb-4"
>{respuestasv.name } </button>
</div>
))}
Código de shuffleArray(a)
function shuffleArray(a) {
console.log("hi")
var j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}
En mi react.js tengo un array de datos que traigo de un api y este quiero que sea reordenado aleatoriamente con el código anterior. Para ello cuento con una funcion shuffleArray(a)
pero surge un problema que no lo entiendo:
Que cada vez que hago click en el botón, este llama de nuevo a shuffleArray
y me reorganiza el array haciendo que se muestre los datos en diferente orden nuevamente. El comportamiento esperado es que se muestre el array desordenado que paso por shufleArray
, y cuando clickee (el click se da una sola vez) sea este mismo array y que no llame otra vez a shufleArray
.
Entendí que se esta haciendo un re-render por el método shuffleArray(a) por que este cambia el valor de **a** por el valor aleatorio de **a** por lo que lo vuelve a renderizar.
¿Cómo podría evitas ese comportamiento?.
handleClickedVideo
, por esa razónshuffleArray
se dispara nuevamente y con su respectivo nuevo ordenamiento, puede que se tenga que rediseñar la lógica desuffleArray
, ¿Puedes compartir el código dehandleClickedVideo
?