带有单选按钮的 React 组件重新渲染将值设置回 null

Question

I am rendering a questionnaire page that shows a question component that has the following attributes; Question number, Question text, and 5 radio buttons that each have an answer.

What i am trying to achieve is when a user clicks on a radio button, I store on state the answer and the question number.

I have come across a problem where once my component renders and I click an answer it seems like it re-renders and my radio button of choice seems like it has not been clicked.

This is my Questionaire page where I embed the question component

  const Questionaire = (props) => {

  const [answers, set_answers] = useState({});

  console.log("Inside Questionaire component", answers);

  const onChangeAnswerFunc = (answer, match) => {
    set_answers({ ...answers, [match.params.questionNumber]: answer });
  };

  return (
    <div className="quiz">
      <Route
        path="/dashboard/questions/:questionNumber"
        component={({ match }) => (
          <Question
            questionNumber={match.params.questionNumber}
            answerFunc={(e) => onChangeAnswerFunc(e, match)}
          />
        )}
      />
    </div>
  );
};

export default Questionaire;

And this is my question component

const Question = ({ omat, pmat, cmat, questionNumber, answerFunc }) => {
  const [currentRadioValue, setRadioValue] = useState(null);
  useEffect(() => {
    if (currentRadioValue != null) {
      answerFunc(currentRadioValue);

      console.log("Inside useEffect");
    }
  }, [currentRadioValue, answerFunc]);

  const onChange = (e) => {
    setRadioValue(e.target.value);
    // handleChange();
    // console.log("onChange");
  };
  console.log("Under on change", currentRadioValue);

  const handleChange = () => {
    answerFunc(currentRadioValue);
  };

  // console.log(currentRadioValue);

  const onSubmit = async (e) => {
    e.preventDefault();
  };

  if (!omat) return null;
  const question = omat[questionNumber];
  const {
    question: text,
    section,
    subject,
    score0,
    score25,
    score50,
    score75,
    score100,
  } = question;

  const anyQuestion = (
    <Link to={`/dashboard/questions/${Number(questionNumber) + 1}`}>Next</Link>
  );
  const finalQuestion = <button>Submit</button>;

  const previousQuestion = (
    <Link to={`/dashboard/questions/${Number(questionNumber) - 1}`}>
      Previous
    </Link>
  );

  return (
    <div>
      <div className="questions">
        <h2 className="lead">Question number: {questionNumber} / 40 </h2>
        <p className="question-section">Section: {section}</p>
        <p className="question-subject">Subject: {subject}</p>
        <div>{text}</div>
        <form className="form" onSubmit={(e) => onSubmit(e)}>
          <div className="form-group">
            <>
              <input
                type="radio"
                name={`Radio`}
                value="Radio - 1"
                checked={currentRadioValue === `Radio - 1`}
                onChange={(e) => onChange(e)}
              />
              <label> - {score0}</label>
            </>
          </div>
          <div className="form-group">
            <>
              <input
                type="radio"
                name={`Radio`}
                value="Radio - 2"
                checked={currentRadioValue === `Radio - 2`}
                onChange={(e) => onChange(e)}
              />
              <label> - {score25}</label>
            </>
          </div>
          <div className="form-group">
            <>
              <input
                type="radio"
                name={`Radio`}
                value="Radio - 3"
                checked={currentRadioValue === `Radio - 3`}
                onChange={(e) => onChange(e)}
              />
              <label> - {score50}</label>
            </>
          </div>
          <div className="form-group">
            <>
              <input
                type="radio"
                name={`Radio`}
                value="Radio - 4"
                checked={currentRadioValue === `Radio - 4`}
                onChange={(e) => onChange(e)}
              />
              <label> - {score75}</label>
            </>
          </div>
          <div className="form-group">
            <>
              <input
                type="radio"
                name={`Radio`}
                value="Radio - 5"
                checked={currentRadioValue === `Radio - 5`}
                onChange={(e) => onChange(e)}
              />{" "}
              <label> - {score100}</label>
            </>
          </div>
        </form>
      </div>
      {Number(questionNumber) > 0 ? previousQuestion : null}
      {Number(questionNumber) !== 5 ? anyQuestion : finalQuestion}

      <Link to={`/`}>Exit</Link>
    </div>
  );
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  omat: state.questions.omat,
  pmat: state.questions.pmat,
  cmat: state.questions.cmat,
});

export default connect(mapStateToProps)(Question);

If I disable the handleChange function from the onChange, the radio - button are displayed properly (checked), with the handleChange uncommended the value once passed returns again to null.

I will attach a console log which might help further.

Chrome console log

Here is a picture of the front end rendered

Front end

Thanks in advance!

Answer 1

Use shouldComponentUpdate life-cycle method to prevent unnecessary rendering, by default component re-rendered on state change.