Как повторно инициализировать состояние с помощью ответного хука при повторной визуализации компонентов

Question

Я создал компонент для отображения вопроса и его различных параметров, и когда пользователь нажимает кнопку «Далее», будет выполнено перенаправление на ту же страницу, чтобы повторно отобразить компонент и отобразить новый вопрос. Я использую компонент checkBox для отображения опций вопроса, но всякий раз, когда я выбираю опцию и перехожу к следующему вопросу;флажки не сбрасываются для нового (например, если я проверил второй вариант для первого вопроса, я проверил второй вариант во втором вопросе, прежде чем я его проверил).

import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import React, { useEffect, useState } 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 { IAnswer, 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: (arg: IAnswer) => void;
  numberOfQuestions: number;
}

interface IAnswerOption {
  option1: boolean;
  option2: boolean;
  option3: boolean;
  option4: boolean;
  [key: string]: boolean;

}

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

  const [answerOption, setAnswerOption] = useState<IAnswerOption>({
    option1: false,
    option2: false,
    option3: false,
    option4: false,
  });

  const handleChange = (option: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
    setAnswerOption({ ...answerOption, [option]: event.target.checked });
  };
  useEffect(() => {
    questionRequest();
  });

  const handleNextQuiz = () => {
    if (currentQuestionNumber === numberOfQuestions - 1) {
      history.push("/homepage");
    } else {
      incrementQuestion(answerOption);
      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}>
                        <CheckBoxWrapper
                          checked={answerOption[fieldName]}
                          value={fieldName}
                          onChange={handleChange(fieldName)}
                          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: (answer: IAnswer) => dispatch<any>(incrementQuestion(answer)),
    questionRequest: () => dispatch<any>(questionRequest())
  };
};

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

Как можноЯ сбрасываю параметры вопроса каждый раз, когда я переопределяю компонент, чтобы проверить параметры?

Answer 1

Я думаю, вам просто нужно починить useEffect.

  useEffect(() => {
    setAnswerOption({
      option1: false,
      option2: false,
      option3: false,
      option4: false,
    });

    questionRequest();
  }, []);

Кроме того, не забудьте передать второй аргумент, иначе у вас может быть бесконечный цикл в вашем компоненте. https://reactjs.org/docs/hooks-effect.html

Answer 2

 const fieldName = `option${index + 1}`;

Сбросить fieldName при переходе к следующему вопросу