在单选按钮更改时显示一个问题，并在每 3 个问题做出反应后提交用户答案

Question

我是 React 的新手，我有一组随机的 120 个问题，每次向用户显示 3 个问题，当所有 3 个问题都填满后，用户提交，然后加载下一组 3 个问题。我想显示 3 个问题中的 1 个，并在选中的每个单选按钮上显示下一个问题，当回答 3 个问题时，提交按钮显示下一组问题。

const Quiz = () => {
    const {questions, quiz, options} = useSelector((state) => state.quiz);
    
    const dispatch = useDispatch();
    const history = useHistory();
    const classes = useStyles();
    
   
// this is to get thel questions from the history coming from redux store.
    useEffect(() => {
        if (!questions) {
            dispatch(fetcQuestions(history));
          
        }

    }, []);

      const handleRadioChange = (number, event) => {
        let currentSelection = questions.find(question => question.number === number);
        console.log(currentSelection + "radio selected");
        currentSelection.value = event.target.value;
        console.log(currentSelection.value + "calculate score");
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        }
    };
    return (
        
        !questions?.length ? <CircularProgress /> : (
                     <form onSubmit={handleSubmit}>

                    {questions.map((question) => (
                        <FormControl component="fieldset" key={question.number} className={classes.formControl}>
                            <FormLabel component="legend">{question.question}</FormLabel>
                            <RadioGroup aria-label="quiz" name="quiz" value={question.value} onChange={(e) => handleRadioChange(question.number, e)}>
                                {options.map((option) => 
                                    <FormControlLabel key={option.number} value={option.number} control={<Radio />} label={option.label} />
                                    
                               )}
                            </RadioGroup>
                        </FormControl>
                        

                    ))}

                    <Button type="submit" variant="outlined" color="primary" className={classes.button}>
                        Submit
                </Button>
              
                </form>
           
        )
    );
};

如有任何帮助，我们将不胜感激。谢谢。

---

我尝试通过添加 2 个状态来实现，但问题是我无法将问题编号与当前问题相匹配

const Quiz = () => {
    const {questions, quiz, options} = useSelector((state) => state.quiz);
    
    const [current_question, setCurrentQuestion] = useState();
    console.log(current_question[number] + "1q");
    
   
    const dispatch = useDispatch();
    const history = useHistory();
    const location = useLocation();
    const classes = useStyles();
    

// this is to get thel questions from the history coming from redux store.
    useEffect(() => {
        if (!questions) {
            dispatch(fetcQuestions(history));
          
         
        }

    }, []);

      const handleRadioChange = (number, event) => {
        let currentSelection = questions.find(question => question.number === number);
        console.log(currentSelection + "radio selected");
        currentSelection.value = event.target.value;
        console.log(currentSelection.value + "calculate score");
        let new_current_questions = Math.min(
            current_question + 1,
            questions.length - 1
          );
          console.log(new_current_questions);
        setCurrentQuestion(new_current_questions);
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        
    };
    return (
        
        !questions?.length ? <CircularProgress /> : (
            <Grid className={classes.container} container alignItems="stretch" spacing={1}>
             
                <form onSubmit={handleSubmit}>
                   
                    {questions.map((question) => (
                        
                        <FormControl component="fieldset" key={question.number} className={classes.formControl} data-hidden={question.number !== current_question[question.number]}>
                            <FormLabel component="legend">{question.question}</FormLabel>
                            <RadioGroup aria-label="quiz" name="quiz" value={question.value} onChange={(e) => handleRadioChange(question.number, e)}>
                                {options.map((option) => 
                                    <FormControlLabel key={option.score} value={option.score} control={<Radio />} label={option.label} />
                                    
                               )}
                            </RadioGroup>
                        </FormControl>
                        

                    ))}

                    <Button type="submit" variant="outlined" color="primary" className={classes.button}>
                        Submit
                </Button>
              
                </form>
            </Grid>
        )
    );
};



export default Quiz;

我添加了数据隐藏字段来显示none；因此仅显示当前问题，但所有 3 个问题都会出现。我认为问题是我没有得到问题编号的数组。请帮助

Answer 1

在您的尝试中，您没有为 current_question 状态设置初始值，因此当您要增加它时，您正在执行以下操作： undefined + 1.

您还需要有条件地呈现问题，通过预先过滤它们或在将它们映射到 JSX 时：

const Quiz = () => {
    const { questions, quiz, options } = useSelector((state) => state.quiz);
    
    const [currentQuestion, setCurrentQuestion] = useState(0);
    console.log(currentQuestion[number] + "1q");
    
    const dispatch = useDispatch();
    const history = useHistory();
    const location = useLocation();
    const classes = useStyles();
    

    // this is to get the questions from the history coming from redux store.
    useEffect(() => {
        if (!questions) {
            dispatch(fetchQuestions(history));
        }
    }, []);

      const handleRadioChange = (number, event) => {
        let currentSelection = questions.find(question => question.number === number);
        console.log(currentSelection + "radio selected");
        currentSelection.value = event.target.value;
        console.log(currentSelection.value + "calculate score");
        // Set the new question count based on the current one
        setCurrentQuestion((current) => {
          return Math.min(
            current + 1,
            questions.length - 1
          );
        });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
    };
    return (
        !questions?.length ? <CircularProgress /> : (
            <Grid className={classes.container} container alignItems="stretch" spacing={1}>
                <form onSubmit={handleSubmit}>
                    {/* Only show the question if it's index is less than or equal to the current question */}
                    {questions.map((question, index) => (index <= currentQuestion ? (
                        <FormControl component="fieldset" key={question.number} className={classes.formControl} data-hidden={question.number !== current_question[question.number]}>
                            <FormLabel component="legend">{question.question}</FormLabel>
                            <RadioGroup aria-label="quiz" name="quiz" value={question.value} onChange={(e) => handleRadioChange(question.number, e)}>
                                {options.map((option) => 
                                    <FormControlLabel key={option.score} value={option.score} control={<Radio />} label={option.label} />
                               )}
                            </RadioGroup>
                        </FormControl>
                    ) : null))}
                    <Button type="submit" variant="outlined" color="primary" className={classes.button}>
                        Submit
                </Button>
                </form>
            </Grid>
        )
    );
};

export default Quiz;