React测验应用单选提交问题：仅展示单条数据且易被覆盖

问题根源 #

1. 原状态data每次更新直接赋值为单个答案字符串，覆盖了之前所有数据，导致仅能保留最后一次选择结果。
2. 未将选中答案与对应questionId关联，无法生成包含题目ID和答案的目标数组。
3. 单选按钮的name和id设置不合理，同一题单选按钮未通过相同name实现互斥，id存在重复风险。
4. 缺少提交按钮的处理逻辑，无法将收集的答案转换为目标格式输出。

修改后的ShowAll组件代码 #

import React from "react";
import Data from "../../Pages/Question/Data";

export default function ShowAll() {
  // 用对象存储各题答案，键为questionId，值为选中的答案文本
  const [answers, setAnswers] = React.useState({});

  // 更新对应题目的选中答案
  const handleAnswerChange = (questionId, selectedAns) => {
    setAnswers(prev => ({
      ...prev,
      [questionId]: selectedAns
    }));
  };

  // 提交时转换为目标格式并输出到控制台
  const handleSubmit = () => {
    const result = Object.entries(answers).map(([questionId, selectedAns]) => ({
      questionId: parseInt(questionId),
      selectedAns
    }));
    console.log(result);
  };

  return (
    <>
      {Data.map((item) => {
        return (
          <div key={item.questionId} className="questionsBox">
            <div className="questions">{item.questionText}</div>
            <ul className="answerList">
              {item.answerOptions.map((ans, index) => {
                const inputId = `${item.questionId}-${index}`;
                return (
                  <li key={inputId} className="list-options">
                    <label htmlFor={inputId}>
                      <span>{index + 1})</span>
                      <input
                        type="radio"
                        name={`question-${item.questionId}`}
                        id={inputId}
                        value={ans.answerText}
                        checked={answers[item.questionId] === ans.answerText}
                        onChange={() => handleAnswerChange(item.questionId, ans.answerText)}
                      />
                      {ans.answerText}
                    </label>
                  </li>
                );
              })}
            </ul>
          </div>
        );
      })}
      <button onClick={handleSubmit}>
        Submit
      </button>
    </>
  );
}

关键修改说明 #

• 状态结构优化：改用answers对象存储答案，避免每次更新覆盖全部数据。
• 答案关联题目：通过questionId绑定选中答案，确保每个答案对应正确题目。
• 单选按钮修复：同一题的单选按钮使用相同name实现互斥，id设为唯一值避免冲突。
• 选中状态回显：添加checked属性，让用户直观看到当前选中的选项。
• 提交逻辑实现：将对象格式的答案转换为目标数组格式，点击Submit后输出到控制台。
• React规范适配：给循环渲染的元素添加key属性，符合React列表渲染要求。

内容的提问来源于stack exchange，提问作者ananthapadmanabhan g