ReactJs:如何显示正确的问卷答案和总分？

import React, { useState } from 'react';

const Questionnaire = () => {
  const [answers, setAnswers] = useState({});
  const [totalScore, setTotalScore] = useState(0);

  const handleAnswer = (question, answer, score) => {
    setAnswers(prevAnswers => ({
      ...prevAnswers,
      [question]: answer
    }));
    setTotalScore(prevScore => prevScore + score);
  };

  return (
    <div>
      <h1>Questionnaire</h1>
      <h2>Question 1</h2>
      <label>
        <input
          type="radio"
          name="question1"
          value="option1"
          onChange={() => handleAnswer('question1', 'option1', 10)}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          name="question1"
          value="option2"
          onChange={() => handleAnswer('question1', 'option2', 20)}
        />
        Option 2
      </label>
      {/* Add more questions and options here */}
      <h2>Answers</h2>
      {Object.entries(answers).map(([question, answer]) => (
        <p key={question}>
          Question: {question}, Answer: {answer}
        </p>
      ))}
      <h2>Total Score</h2>
      <p>{totalScore}</p>
    </div>
  );
};

export default Questionnaire;