为什么我的函数 compareQA 返回 0 或 -1？

Question

此屏幕用于乘法练习，给出乘法，您必须将答案输入文本输入并单击确定。 但问题是在我的函数 compareQA 中，qaindex 返回 0 或 -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" />
      <View style={{flex: 1}}>
      </View>
      <View style={{flex: 4, alignItems: 'center', justifyContent: 'center'}}>
        <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/>
        <View  style={[styles.setViewRE1, {alignItems: 'center'}]}>
          <Text style={[styles.textExercice, adaptTitleFontSize,{fontWeight: 'bold'}]}>=</Text>
        </View>
        <LittleSpace05 />
        <View onLayout={(event) => {getSize(event, 3,'button')}} style={styles.setViewRE1}>
          <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/>
          <Pressable style={styles.buttonRE1} onPress={() => {compareQA();}} >
            <Text style={[styles.textExercice, adaptButtonFontSize]}>OK</Text>
          </Pressable>
          <LittleSpace1/>
        </View>
        <LittleSpace1/>
        <LittleSpace1/>
        <LittleSpace4/>
      </View>
      <View style={{flex: 1,}}>
      </View>
    </View>
  )

}

export default RouletteExercice1;

multiplayArray = [35,17] 乘数 = 5

函数createQuestionsArray创建一个乘法列表[35x1,35x2,35x3,35x4,35x5,17x1,17x2,17x3,17x4,17x5]。

函数 askQuestion 应该从 questionsArray 列表中随机乘法，但是当我将它与答案进行比较时，它不起作用。

谁能告诉我我的代码有什么问题？请。

Answer 1

除非您希望 createQuestionsArray 在每次渲染上运行，否则：

useEffect(() => {
    createQuestionsArray();
});

应该是

useEffect(() => {
    createQuestionsArray();
}, []);

鉴于您在此函数中设置状态，这可能会启动许多重新渲染。