上一个按钮无法正常运行 React

Question

我有一个测验页面，每次都会加载 3 个问题，提交后会加载下 3 个问题。单击前一个用户可以更改 his/her 在单击提交按钮之前选择的答案。但在代码中，前一个按钮无法正常工作。在 5-6 单击上一个按钮后，用户将被重定向到下一页。用户只有在完成测验后才能进入下一页。但这并没有发生。请帮我找出代码中的错误。

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 previousQuestion = (current_question) => {
    let new_current_questions = Math.max(current_question - 1, 0);
    setCurrentQuestion(new_current_questions);
  };



function handleSubmit(event) {
    event.preventDefault();
     
    const valid = questions.some((q) => !q.value);
    console.log(valid + "questionsalpha");
    if (!valid) {
        dispatch(postQuiz({ responses: questions, id: quiz.id }, history));
    }
    
    setCurrentQuestion(0);

}
        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 */}
   <button type="submit" onClick={previousQuestion}>{current_question+1 ? 'Previous' : null}</button>
                        {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

尝试将上一个按钮的类型更改为其他类型，可能“按钮”类型就可以了。有帮助吗？

Answer 2

您的 Previous Question 按钮在您的表单内部，并且您没有在 previousQuestion 函数中使用 event.preventDefault() 因此，虽然调用了 previous question 函数，但 handleSubmit 函数也同时被执行。

您还可以在不传递 current_question 参数的情况下调用 previousQuestion 函数。您应该从函数内部的状态中获取 currentQuestion，并防止单击 Previous Question 按钮时的默认操作。

你之前的问题函数应该是这样的：

const previousQuestion = (event) => {
  event.preventDefault();
  let new_current_questions = Math.max(currentQuestion - 1, 0);
  setCurrentQuestion(new_current_questions);
};

这应该可以解决您遇到的问题

上一个按钮无法正常运行 React

Previous Button is not functioning properly React

javascript

reactjs

react-redux