React中如何匹配JSON值设置单选框选中及修复onChange更新问题

我来帮你搞定这两个问题，咱们结合你提供的数据一步步实现：

1. 设置单选框的默认选中状态 #

首先，你需要找到当前问题对应的已保存答案，然后将单选框的checked属性与答案值做匹配。具体步骤如下：

• 在组件的render方法中，先从state.answers里筛选出当前问题对应的答案：

  const currentAnswer = this.state.answers.find(
    ans => ans.questionID === question.questions.questionID.toString()
  );
  

• 遍历question.questions.values生成单选框时，通过option.id === currentAnswer?.answerValues来判断是否选中（这里用可选链操作符?.避免没有答案时报错）。

2. 通过onChange事件更新答案数组 #

需要编写一个事件处理函数，在单选框切换时更新state里的answers数组：

完整组件示例 #

class QuestionForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      answers: [{ questionID: "1", answerValues: "2" }]
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(questionID, selectedValueId) {
    this.setState(prevState => {
      // 先检查是否已有该问题的答案
      const hasExistingAnswer = prevState.answers.some(
        ans => ans.questionID === questionID.toString()
      );

      if (hasExistingAnswer) {
        // 替换已有答案
        return {
          answers: prevState.answers.map(ans =>
            ans.questionID === questionID.toString()
              ? { ...ans, answerValues: selectedValueId }
              : ans
          )
        };
      } else {
        // 添加新答案
        return {
          answers: [...prevState.answers, {
            questionID: questionID.toString(),
            answerValues: selectedValueId
          }]
        };
      }
    });
  }

  render() {
    const question = { 
      questions: { 
        questionID: 1, 
        title: "Your gender ?", 
        values: [{ id: "1", value: "Male" }, { id: "2", value: "Female" }] 
      } 
    };
    const currentAnswer = this.state.answers.find(
      ans => ans.questionID === question.questions.questionID.toString()
    );

    return (
      <div className="question-container">
        <h4>{question.questions.title}</h4>
        {question.questions.values.map(option => (
          <label key={option.id} className="radio-label">
            <input
              type="radio"
              name={`question-${question.questions.questionID}`}
              value={option.id}
              checked={option.id === currentAnswer?.answerValues}
              onChange={() => this.handleChange(question.questions.questionID, option.id)}
            />
            {option.value}
          </label>
        ))}
      </div>
    );
  }
}

关键逻辑说明 #

• 单选框分组：给每个单选框设置相同的name属性（比如question-${questionID}），确保同一组单选框只能选中一个。
• 状态更新：handleChange函数中，先判断当前问题是否已有答案：
  • 有答案则用map替换对应项的answerValues
  • 无答案则用扩展运算符...添加新的答案对象到数组中
• 默认选中：通过currentAnswer?.answerValues匹配选项的id，实现页面加载时自动选中已保存的答案。

内容的提问来源于stack exchange，提问作者Mo.