Как предотвратить повторную визуализацию страницы, когда условие не проверено с помощью redux

Question

У меня есть страница, которая содержит бумагу, содержащую вопрос, список параметров и кнопку для перенаправления на следующий вопрос.

import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import React, { useEffect } from "react";
import { connect } from "react-redux";
import SyntaxHighlighter from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
import { Dispatch } from "redux";
import { Field, reduxForm } from "redux-form";
import { incrementQuestion, IQuestion, questionRequest } from "../../actions/index";
import CheckBoxWrapper from "../../components/common/CheckBoxWrapper";
import ContentQuiz from "../../components/ContentQuiz";
import history from "../../history/history";

interface IProps {
  currentQuestionNumber: number;
  loadingData: boolean;
  questions: IQuestion[];
  questionRequest: () => void;
  incrementQuestion: () => void;
  numberOfQuestions: number;
}

const Quiz = (props: IProps) => {
  const { currentQuestionNumber,
    loadingData,
    questions,
    questionRequest,
    incrementQuestion,
    numberOfQuestions } = props;
  useEffect(() => {
    questionRequest();
  });

  const handleNextQuiz = () => {
    if (currentQuestionNumber === numberOfQuestions - 1) {
      history.push("/homepage");
    }
    incrementQuestion();
    history.push("/contentQuiz");
  };

  const currentQuestion = questions[currentQuestionNumber];
  return (
    <div>
      {loadingData ? ("Loading ...") : (
        < ContentQuiz
          questionNumber={currentQuestionNumber + 1}
          handleClick={handleNextQuiz} >
          <div>
            <Typography variant="h3" gutterBottom> What's the output of </Typography>
            <>
              <SyntaxHighlighter language="javascript" style={dark} >
                {currentQuestion.description.replace(";", "\n")}
              </SyntaxHighlighter >
              <form>
                <Grid container direction="column" alignItems="baseline">
                  {currentQuestion.options.map((option: string, index: number) => {
                    const fieldName = `option ${index + 1}`;
                    return (
                      <Grid key={index}>
                        <Field
                          name={fieldName}
                          component={CheckBoxWrapper}
                          label={option}
                        />
                      </Grid>);
                  }
                  )}
                </Grid>
              </form>
            </>
          </div >
        </ContentQuiz >
      )}
    </div>
  );
};

const mapStateToProps = (state: any) => {
  const { currentQuestionNumber, loadingData, questions, numberOfQuestions } = state.quiz;

  return {
    currentQuestionNumber,
    loadingData,
    questions,
    numberOfQuestions
  };
};

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    incrementQuestion: () => dispatch<any>(incrementQuestion()),
    questionRequest: () => dispatch<any>(questionRequest())
  };
};

const QuizContainer = reduxForm<{}, IProps>({
  form: "Answers",
  destroyOnUnmount: false,
})(Quiz);

export default connect(mapStateToProps, mapDispatchToProps)(QuizContainer);

handleNextQuiz увеличивает счетчик номера вопроса и перенаправляет нана той же странице для повторного отображения компонента (я думаю, что не лучшая идея перенаправлять на одно и то же при каждом нажатии кнопки и любое предложение, которое будет обрабатываться, будет приветствоваться). Но я хочу проверить, когда это последний вопрос, который пользователь должен перенаправить на другую страницу для проверки и отправки. Однако с моим кодом, при тестировании компонентов со списком вопросов и при попытке перенаправить пользователя на последнюю страницу. Компонент исчисляется сотнями, и возникает ошибка, в которой упоминается:

TypeError: Cannot read property 'description' of undefined

Как мне справиться с этой ситуацией, чтобы не перерисовывать ту же страницу при нажатии следующей кнопки в последнем вопросе.

Answer 1

const handleNextQuiz = () => {
    if (currentQuestionNumber === numberOfQuestions - 1) {
      history.push("/homepage");
    }
    incrementQuestion();
    history.push("/contentQuiz");
  };

Вышеуказанная функция неверна, предположим, что первое условие выполнено, успешно перенаправлено на /homepage, функция еще не завершена. incrementQuestion(); выполняется с последующим перенаправлением на /contentQuiz.

Вам необходимо добавить оператор return в условие if, чтобы избежать выполнения следующего кода, ИЛИ использовать if else. Таким образом, в основном, должен быть только 1 редирект за один раз.

const handleNextQuiz = () => {
  if (currentQuestionNumber === numberOfQuestions - 1) {
    history.push("/homepage");
  } else {
    incrementQuestion();
    history.push("/contentQuiz");
  }
};