Se mostrarán cinco números aleatorios (de la matriz de números) uno por uno y debemos recordar los últimos cuatro números haciendo clic en el número. Las respuestas se presionan para responder a la matriz después de hacer clic. Ahora necesito comparar la matriz de respuestas y la matriz de números para calcular la puntuación. Mi problema está en la lógica de puntuación que no funciona como se esperaba. Cuando la primera suposición (o cualquier suposición) es correcta, todas las suposiciones restantes también se cuentan como correctas, incluso si no lo son.
enlace:https://codesandbox.io/s/pensive-pascal-rh6e13?file=/src/App.js
A continuación se muestra la lógica de cálculo de puntuación
useEffect(() => { if (answers.length) { if (numbers[4].num === answers[3]) { console.log( "match is--------------------------------1", numbers[4].num, answers[3] ); setScore(score=> score + 1); } else if (numbers[3].num === answers[2]) { console.log( "match is--------------------------------2", numbers[3].num, answers[2] ); setScore(score=> score + 1); } else if (numbers[2].num === answers[1]) { console.log( "match is--------------------------------3", numbers[2].num, answers[1] ); setScore(score=> score + 1); } else if (numbers[1].num === answers[0]) { console.log( "match is--------------------------------4", numbers[1].num, answers[0] ); setScore(score=> score + 1); } else { console.log("no match---------------------"); } } }, [answers, numbers]);Puedes calcular la puntuación haciendo algo como esto:
const myScore = useMemo(() => { let points = 0; const numbersToCompare = numbers.filter((_, index) => index > 0); for (let i in numbersToCompare) { if (numbersToCompare[i].num === answers[i]) { points = points + 1; } } return points; }, [answers, numbers]);Es posible que desee simplificar su lógica de cálculo con un ciclo como ese:
useEffect(() => { console.log("Checking result", answers, numbers); if (answers.length < numbers.length - 1) { return; } let i = 0; while (i < numbers.length - 1) { if (numbers[i + 1].num === answers[i]) { console.log("match is--------------------------------1"); setScore((score) => score + 1); } i++; } }, [answers, numbers]);Aquí tienes un fork de tu demo con los cambios que describo a continuación:
https://codesandbox.io/s/elegant-sara-zftstd?file=/src/App.js
La comparación de dos matrices se puede almacenar en una matriz de resultados usando Array.map , posteriormente puede usar Array.reduce para calcular una puntuación.
Algo como
const arr = [...Array(5)] .map( _ => Math.floor(Math.random() * 10) + 1 ); const fakeAnswer = [...Array(5)] .map( _ => Math.floor(Math.random() * 10) + 1 ); const results = arr.map((v, i) => v === fakeAnswer[i]); const score = results.reduce( (acc, val) => acc + +val, 0); console.log(`random values [${arr}]`); console.log(`fakeAnswer: [${fakeAnswer}]\nresults: [${ results}]\nscore: ${score}`);