在选择单选按钮时，下一个问题显示在 React 下方

Question

我想一次显示一个问题。截至目前，当单选按钮被选中时，下一个问题会出现在它的下方。我想一次显示一个问题。当一个问题被回答时，应该只显示新问题，而不是上一个问题。

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;

上一个问题适用于上一个按钮。请帮助解决问题。谢谢

Answer 1

要仅显示下一个问题，而不是之前的问题，请从您的代码中删除 map 函数。只显示 currentQuestion 索引问题。

  <FormControl
    component='fieldset'
    className={classes.formControl}
    data-hidden={
      questions[currentQuestion].number !==
      current_question[questions[currentQuestion].number]
    }
  >
    <FormLabel component='legend'>
      {questions[currentQuestion].question}
    </FormLabel>
    <RadioGroup
      aria-label='quiz'
      name='quiz'
      onChange={(e) =>
        handleRadioChange(questions[currentQuestion].number, e)
      }
    >
      {options.map((option) => (
        <FormControlLabel
          key={option.score}
          value={option.score}
          control={<Radio />}
          label={option.label}
        />
      ))}
    </RadioGroup>
  </FormControl>

在选择单选按钮时，下一个问题显示在 React 下方

On selecting Radio button next question is shown below React

javascript

reactjs

react-redux