const questions = [ { questionText: "What is the capital of France?", answerOptions: [ { answerText: "New York", isCorrect: false }, { answerText: "London", isCorrect: false }, { answerText: "Paris", isCorrect: true }, { answerText: "Dublin", isCorrect: false } ].sort(() => Math.random() - 0.5), //it sorts but when clicked it generate new random values(position change which is not good) in answerOptions1 answerOptions1: [ { answerText: "New York1", isCorrect: false }, { answerText: "London1", isCorrect: false }, { answerText: "Paris1", isCorrect: true }, { answerText: "Dublin1", isCorrect: false } ].sort(() => Math.random() - 0.5) //it sorts but when clicked it generate new random values in answerOptions }, {}, {} ] .sort(() => Math.random() - 0.5) // this sorting is not working ;Enlace de Codesanbox: https://codesandbox.io/s/lucid-zeh-5ulr5z?file=/src/App.js
Necesito ordenar las preguntas, las opciones de respuesta y la matriz de opciones de respuesta1 en orden aleatorio. El .sort(() => Math.random() - 0.5) no funciona para esta lógica. Cuando se hace clic en answerOptions, también genera una nueva posición aleatoria en answeOptions1. answerOptions y answerOptions1 no deben cambiar su posición y datos/valor (cuando se obtienen de una lista grande).
Su matriz generada aleatoriamente cambiará en cada renderizado. use el gancho React useMemo para generar una matriz aleatoria una vez.
const questions = useMemo(()=>[ { questionText: "What is the capital of France?", answerOptions: useMemo(()=>[ { answerText: "New York", isCorrect: false }, { answerText: "London", isCorrect: false }, { answerText: "Paris", isCorrect: true }, { answerText: "Dublin", isCorrect: false } ].sort(() => Math.random() - 0.5), []), //it sorts but when clicked it generate new random values(position change which is not good) in answerOptions1 answerOptions1: useMemo(()=>[ { answerText: "New York1", isCorrect: false }, { answerText: "London1", isCorrect: false }, { answerText: "Paris1", isCorrect: true }, { answerText: "Dublin1", isCorrect: false } ].sort(() => Math.random() - 0.5), []) //it sorts but when clicked it generate new random values in answerOptions }, {}, {} ].sort(() => Math.random() - 0.5), [])