¿Por qué mi función compareQA devuelve 0 o -1?
Esta pantalla es para ejercicio de multiplicación, se te da una multiplicación y tienes que poner la respuesta en el textinput y hacer clic en OK. Pero el problema es que en mi función compareQA, qaindex devuelve 0 o -1.
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Pressable, TextInput } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import styles from '../Components/AppStyle';
import {LittleSpace05,LittleSpace1, LittleSpace4} from '../Components/LittleSpace';
import changeSize from '../Components/ChangeSize';
function RouletteExercice1 ({ route, navigation }){
const { multiplyArray, multBy} = route.params;
const [adaptTitleFontSize, setAdaptTitleFontSize] = useState({
fontSize: 16,
});
const [adaptButtonFontSize, setAdaptButtonFontSize] = useState({
fontSize: 16,
});
const getSize = (event, divide, thing) => {
if (thing == 'title') {
setAdaptTitleFontSize(changeSize(event.nativeEvent.layout, divide))
} else {
setAdaptButtonFontSize(changeSize(event.nativeEvent.layout, divide))
}
};
const [questionsArray,setQuestionsArray] = useState([]);
const [answersArray,setAnswersArray] = useState([]);
const [mQuestion,setMQuestion] = useState();
const [qaIndex,setQAIndex] = useState(0);
const [textInputAnswer, setTextInputAnswer] = useState();
useEffect(() => {
createQuestionsArray();
},[]);
function createQuestionsArray() {
let m = 0;
while (m < multiplyArray.length) {
let b = 1;
while (b < multBy+1) {
let quest = multiplyArray[m]+'x'+b;
let rep = multiplyArray[m]*b;
setQuestionsArray((prev) => [...prev, quest]);
setAnswersArray((prev) => [...prev, rep]);
b++
}
m++
}
askQuestion();
}
function askQuestion(){
setMQuestion(questionsArray[Math.floor(Math.random()*questionsArray.length)]);
}
function compareQA(){
setQAIndex(questionsArray.indexOf(mQuestion));
if (answersArray[qaIndex]==textInputAnswer) {
questionsArray.splice(qaIndex,1);
answersArray.splice(qaIndex,1);
console.log(qaIndex);
askQuestion();
}
}
return(
<view style="{{" flex:="" 1,="" flexdirection:="" 'column'}}="">
<statusbar style="auto"></statusbar>
<view style="{{flex:" 1}}="">
</view>
<view style="{{flex:" 4,="" alignitems:="" 'center',="" justifycontent:="" 'center'}}="">
<littlespace1></littlespace1>
<littlespace1></littlespace1>
<view onlayout="{(event)" ==""> {getSize(event,2,'title')}} style={[styles.setViewRE1, {alignItems: 'center;'}]}>
<text style="{[styles.textExercice," adapttitlefontsize,{fontweight:="" 'bold;'}]}="">{mQuestion}</text>
</view>
<littlespace05></littlespace05>
<view style="{[styles.setViewRE1," {alignitems:="" 'center;'}]}="">
<text style="{[styles.textExercice," adapttitlefontsize,{fontweight:="" 'bold;'}]}="">=</text>
</view>
<littlespace05></littlespace05>
<view onlayout="{(event)" ==""> {getSize(event, 3,'button')}} style={styles.setViewRE1}>
<littlespace4></littlespace4>
<textinput onchangetext="{text" ==""> setTextInputAnswer(text.replace(/[^0-9]/g, ''))}
value={textInputAnswer}
placeholder="perso"
textAlign={'center'}
keyboardType="numeric"
style={[ styles.inputRE1, adaptButtonFontSize]}
type='number'
/>
<littlespace1></littlespace1>
<pressable style="{styles.buttonRE1}" onpress="{()" ==""> {compareQA();}} >
<text style="{[styles.textExercice," adaptbuttonfontsize]}="">OK</text>
</pressable>
<littlespace1></littlespace1>
</textinput></view>
<littlespace1></littlespace1>
<littlespace1></littlespace1>
<littlespace4></littlespace4>
</view>
<view style="{{flex:" 1,}}="">
</view>
</view>
)
}
export default RouletteExercice1;
multiplayArray = [35,17]
multby = 5
La función createQuestionsArray crea una lista de multiplicaciones [35×1,35×2,35×3,35×4,35×5,17×1,17×2,17×3,17×4,17×5].
La función askQuestion se supone que toma una multiplicación al azar de la lista questionsArray pero cuando la comparo con la respuesta no funciona.
¿Alguien puede decirme qué está mal en mi código? Por favor.
davy.ai
El problema con el código es que qaIndex no se actualiza sincrónicamente. Cuando se ejecuta la función compareQA, qaIndex toma el estado actual de la variable de estado, que es 0 al principio, y puede no ser el mismo que el índice de la pregunta actual en questionsArray. Por lo tanto, la comparación de respuestas falla.
Una posible solución es actualizar la variable qaIndex directamente dentro de la función askQuestion antes de establecer la pregunta, y utilizar el qaIndex actualizado para comparar la respuesta en la función compareQA. Aquí está el código modificado:
En este código, la función askQuestion genera un nuevo índice aleatorio almacenado en la variable newIndex. Luego, establece la nueva pregunta y actualiza la variable de estado qaIndex con la variable newIndex. Esto asegura que qaIndex siempre refleje el índice actual de la pregunta en questionsArray.
En la función compareQA, utilizamos la variable de estado qaIndex para recuperar la respuesta actual para la pregunta actual. El resto del código elimina la pregunta y respuesta actual de sus respectivos arrays, establece el nuevo estado para estos arrays, y llama a askQuestion para mostrar una nueva pregunta.
Con estas modificaciones, la comparación de respuestas debería funcionar correctamente.