React问答应用：用户选中答案的状态保存问题求助

问题描述 #

使用React开发问答应用时，点击选项按钮无法正确切换选中状态（isSelected）和背景色，遍历题目选项数组定位id和状态时出现错误。

核心错误点 #

• 状态更新逻辑错误：holdAnswer函数中嵌套map只返回了选项数组，破坏了原有的题目对象结构，导致状态更新后数据格式错误。
• 点击事件参数传递错误：向QuizItem传递holdAnswer时，用forEach遍历选项id的方式完全错误，无法传递当前点击选项的id。
• 样式绑定错误：QuizItem中用forEach获取isSelected会返回undefined，且所有按钮共用同一个样式，无法根据单个选项的状态独立切换背景色。

修正后的代码 #

1. QuizList组件的状态更新与渲染修正

function holdAnswer(choiceId) {
  setQuiz((oldQuiz) =>
    oldQuiz.map((quizItem) => ({
      // 保留题目原有属性，只更新choices数组
      ...quizItem,
      choices: quizItem.choices.map((choice) =>
        choice.id === choiceId
          ? { ...choice, isSelected: !choice.isSelected }
          : choice
      )
    }))
  );
}

const quizItemComponents = quiz.map((item) => {
  return (
    <QuizItem
      key={item.id}
      question={item.question}
      choices={item.choices}
      // 传递一个接收choiceId的函数，而非直接调用
      holdAnswer={(choiceId) => holdAnswer(choiceId)}
    />
  );
});

2. QuizItem组件修正

export default function QuizItem(props) {
  return (
    <div>
      <div className={classes.quizlist__quizitem}>
        <h3 className={classes.quizitem__h3}>{props.question}</h3>
        {props.choices.map((choice) => {
          // 每个选项单独计算自己的样式
          const buttonStyle = {
            backgroundColor: choice.isSelected ? "#D6DBF5" : "white",
          };
          return (
            <AnswerButton
              key={choice.id}
              // 点击时传递当前选项的id
              onClick={() => props.holdAnswer(choice.id)}
              style={buttonStyle}
            >
              {choice.choice}
            </AnswerButton>
          );
        })}
      </div>
    </div>
  );
}

3. AnswerButton组件（无需修改）

import classes from "./AnswerButton.module.css";

export default function AnswerButton(props) {
  return (
    <button
      className={classes.answerbutton}
      type={props.type || "button"}
      onClick={props.onClick}
      style={props.style}
      name={props.name}
    >
      {props.children}
    </button>
  );
}

修正说明 #

1. 状态更新：在holdAnswer中，先遍历题目数组，对每个题目对象保留原有属性，仅更新其choices数组中对应id的选项状态，确保整个状态结构完整。
2. 事件传递：向QuizItem传递一个可以接收choiceId的回调函数，在QuizItem的每个AnswerButton点击时，把当前选项的id传递给回调，实现精准定位。
3. 样式绑定：为每个选项单独计算样式，直接使用当前选项的isSelected值，确保每个按钮的背景色独立响应自身选中状态。

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