React中如何在单选按钮回显用户已选的历史答案

问题分析 #

你当前代码的核心问题在于：

• getCheckedAnswer 函数未正确返回历史选中的响应ID，遍历后无结果返回，且函数本身缺少return语句
• 单选按钮的value硬写为固定值，无法和历史响应ID形成对应关系
• checked的判断逻辑错误，没有正确对比当前选项与历史选中值
• label的htmlFor和input的id不匹配，导致点击标签无法触发单选框选中

修正方案 #

import React from "react";
import "./radioopions.css";

const RadioOptions = (props) => {
  // 定位当前问题对应的历史响应记录
  const currentQuestionResponse = props.response?.find(res => res?.questionId === props?.questionId);
  // 提取历史选中的响应ID（存在则取对应值）
  const historySelectedId = currentQuestionResponse?.response;

  return (
    <div>
      <div className="radio-container">
        <div className="radio-options">
          {props.options?.map((ans) => {
            // 判断当前选项是否为历史选中项
            const isChecked = historySelectedId === ans.optionID;
            
            return (
              <div key={ans.optionID}>
                <div className="answer-options">
                  <input
                    type="radio"
                    className="ans-op-overlay-resolve"
                    id={`option-${ans.optionID}`}
                    value={ans.optionID}
                    checked={isChecked || props.selectedAnswer === ans.optionID}
                    onChange={() => props.handleAnswerOPtion(ans.optionID)}
                  />
                  <label htmlFor={`option-${ans.optionID}`}>{ans.option}</label>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default RadioOptions;

关键修改点说明 #

• 用find替代map：直接定位当前问题的历史响应记录，比遍历全部数据更高效，且能直接获取目标值
• 统一值的对应关系：用选项的optionID作为单选按钮的value，和历史存储的response（响应ID）做对比，保证逻辑一致性
• 修复标签关联：给input添加id属性，与label的htmlFor保持一致，提升交互体验
• 简化选中逻辑：同时兼容实时选中状态（props.selectedAnswer）和历史选中状态，确保两种场景都能正确显示

内容的提问来源于stack exchange，提问作者Samathi kisalka Sapumana