Radio类型输入映射异常：无法获取合法输入的技术求助

我尝试获取Radio类型输入但未成功，无法得到合法的输入内容。曾尝试将内容存入数组，结果返回类似[data data]的异常内容，当前页面显示情况如下：

原代码： #

function showRadioOptions(questionId, data, mKey, qLevel) {
  

data = data.sort((a, b) => a.orderNo - b.orderNo);
  let radioOptions: any = [];
  for (let i = 0; i < data.length; i++) {
    radioOptions = radioOptions.concat(
      `<input type='radio' className='showChildQuestion qid_${questionId}' name='${questionId}' id='${questionId}' value=${data[i].id} data-key='${mKey}' data-ishierarchy='${data[i].isHierarchy}' data-hierarchy-question='${data[i].hierarchyQuestionId}' data-current-question='${questionId}' data-question-level='${data[i].questionLevel}'> ${data[i].optionText} <br/>`
    );
  }
  return radioOptions;
}

function Radio(questionId, options, mKey, qLevel) {
  return "<br/>" + showRadioOptions(questionId, options, mKey, qLevel);
}

问题分析： #

1. 数组转字符串引发格式异常：用数组存储radio的HTML片段，返回后与<br/>拼接时，数组会被自动转为逗号分隔的字符串，页面会出现多余逗号，导致输入解析逻辑混乱。
2. Radio元素ID重复：所有radio的id都设置为同一个questionId，违反HTML中ID必须唯一的规范，可能引发DOM操作异常。
3. Value属性未加引号：value=${data[i].id}未加引号，若id是字符串或包含特殊字符，会导致属性值解析错误，无法正确获取选中值。

修改后的代码： #

function showRadioOptions(questionId, data, mKey, qLevel) {
  data = data.sort((a, b) => a.orderNo - b.orderNo);
  let radioOptions = ''; // 改为字符串累加，避免数组转字符串问题
  for (let i = 0; i < data.length; i++) {
    // 给每个radio设置唯一ID，给value属性添加引号
    radioOptions += `<input type='radio' className='showChildQuestion qid_${questionId}' name='${questionId}' id='${questionId}_${data[i].id}' value='${data[i].id}' data-key='${mKey}' data-ishierarchy='${data[i].isHierarchy}' data-hierarchy-question='${data[i].hierarchyQuestionId}' data-current-question='${questionId}' data-question-level='${data[i].questionLevel}'> ${data[i].optionText} <br/>`;
  }
  return radioOptions;
}

function Radio(questionId, options, mKey, qLevel) {
  return "<br/>" + showRadioOptions(questionId, options, mKey, qLevel);
}

修改说明： #

• 将radioOptions改为字符串类型，用+=累加HTML内容，彻底避免数组转字符串产生的逗号和格式问题。
• 给每个radio的id拼接data[i].id，确保ID唯一，符合HTML规范。
• 给value属性添加单引号，确保属性值解析正确，无论id是数字还是字符串类型都能正常识别。

内容的提问来源于stack exchange，提问作者Alish Madhukar