Estoy creando una aplicación de prueba y tengo el siguiente problema: tengo un conjunto de preguntas y respuestas en una matriz API. La pregunta parece estar bien en el siguiente código, sin embargo, las respuestas incorrectas y correctas, que aparecen por separado, deben unirse para que pueda repetirlas como respuestas de opción múltiple.
A continuación, {incorrect_answers} en el envoltorio h4 muestra la respuesta correcta dos veces en la lista, así como las respuestas incorrectas. ¿Cómo puedo hacer que la respuesta correcta solo aparezca una vez? ¡Por favor ayuda!
const FirstRound = ({quizArray, setQuizArray, num, setNum}) => { const {question, id, correct_answer, incorrect_answers} = quizArray[num]; const randNum = Math.round(Math.random() * incorrect_answers.length)+1; incorrect_answers.splice(randNum, 0, correct_answer) return <> <div class="box"> <h1>Quiz Round One</h1> <h3>{question}</h3> <h4>{incorrect_answers}</h4> </div> <button onClick={Change}>Next</button> </> }Esta parte es sospechosa:
const {question, id, correct_answer, incorrect_answers} = quizArray[num]; const randNum = Math.round(Math.random() * incorrect_answers.length)+1; incorrect_answers.splice(randNum, 0, correct_answer) Es difícil decirlo sin saber cuáles son los tipos o valores de correct_answer e incorrect_answers ; sin embargo, sugiero agregar console.log antes y después de la incorrect_answers.splice(randNum, 0, correct_answer) y ver qué sucede si el componente se representa varias veces.
Dado que el empalme muta las matrices en su lugar, es posible que siga modificando la misma incorrect_answers de respuestas_incorrectas (para agregar la correct_answer en cada representación).
Es posible que primero deba clonar el Array o usar slice en su lugar.