Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

why does the variable keep changing

Every time I run the nextQuestion, the questions change. it’s like running the whole function again, but the nextIndex is not reset.I understand this because I see the category appear several times

import React, { useState } from 'react';
import { useLocalSearchParams } from "expo-router";
import { COLORS } from "../constants";
import { View, Text, Image, Button, StyleSheet, SafeAreaView } from "react-native";
import { requestQuestions } from "../constants/support";
import Header from '../constants/testHeader';


const Test = () => {
    const { category } = useLocalSearchParams();
    let questions = requestQuestions(category);
    const [currentQuestion, setCurrentQuestion] = useState(0);
    console.log(category)

    const nextQuestion = () => {
        const nextIndex = (currentQuestion + 1) % questions.length;

        if (nextIndex === 0) {
            alert('All question are finished.');
        } else {
            setCurrentQuestion(nextIndex);
        }
    };

    const { id, img, question, anwsers } = questions[currentQuestion];
    console.log(questions.map(obj => Object.values(obj)[0]), currentQuestion)
    return (
        <SafeAreaView style={styles.area}>
            <Image source={img || { uri: "https://www.liaros-drive.gr/test/images/pic0484.jpg" }} style={styles.image} />
            <Text style={styles.title}>{question}</Text>
            <SafeAreaView style={styles.buttonContainer}>
                {
                    anwsers && anwsers.map((anwser, index) => (
                        <Button key={index} title={`${index+1}) (${anwser})`} onPress={nextQuestion} />
                    ))
                }
            </SafeAreaView>
        </SafeAreaView>
    )
}

export default Test;

support.js
the questions it is a array of objects.

import { sampleSize } from 'lodash';
import { questions } from './questions.json';
export const requestQuestions = (category = "random") = \ > {
    console.log('test')
    if (category == "random") {
        return sampleSize(questions, 10)
    } else {
        return sampleSize(questions.filter(x = \ > x.category == category), 10)
    }
}

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Every time you call a setter of a state property inside a React component, the component function is called again – in this case calling requestQuestions again, yielding a new list of questions.

Solution: pass the questions as a prop to Test to keep them the same:

function Test({ questions }) {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  // ...rest of your component
}

and in the parent component:

const { category } = useLocalSearchParams();
const questions = requestQuestions(category);

... 

return (
  ...
  <Test questions={questions}/>
  ...
)
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading