Estoy tratando de aleatorizar la opción de preguntas, pero en realidad no puedo mostrarme la aplicación 4 veces. ¿Cómo resolver? Esta es mi primera pregunta sobre stackowerflow.
const [startPage,setStartPage]=React.useState(false) const [questionsData,setQueationsData]=React.useState([]) React.useEffect(()=>{ fetch("https://opentdb.com/api.php?amount=1&type=multiple") .then(res => res.json()) .then(data => (setQueationsData(data.results[0]))) },[1]) console.log(questionsData) function question(){ //! I am trying top arrange randomly answer but not easy const incorrect_answers=questionsData.incorrect_answers console.log(incorrect_answers) const correct_answer=questionsData.correct_answer console.log(correct_answer) const answer = incorrect_answers; answer.splice(Math.floor(Math.random() * (incorrect_answers.length + 1)), 0,correct_answer); console.log(answer) return (<h3>{questionsData.question}</h3>) return (answer.map(answer=>{ return ( <h2>{answer}</h2>)})) }Lo que puede hacer es tener una función separada, por ejemplo, getAnswers() que proporcionará una matriz con valores barajados de todas las respuestas posibles. En estas funciones podrías tener algo como:
const getAnswers = () => { let incorrectAnswers = questionsData.incorrect_answers let correctAnswer = questionsData.correct_answer let answers = []; return answers = shuffle(incorrectAnswers.concat(correctAnswer) } Aquí tiene una función que recopila todas las respuestas posibles en una matriz, pasa esta matriz a funciones shuffle() y luego devuelve las respuestas en orden aleatorio.
Una posible función shuffle() podría ser:
shuffle(array){ var currentIndex = array.length, temporaryValue, randomIndex; while (0 !== currentIndex) { // Pick a random available number randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; }