React点击Answer按钮获取nanoid生成的id时返回undefined问题

问题情况 #

在React项目中，点击答案按钮时控制台输出undefined，无法正确获取由nanoid()生成的按钮ID。问题文本、答案文本等其他props均能正常显示，测试问题ID可正常输出，但答案ID不行。

错误原因 #

1. 父组件传递ID时的逻辑错误 #

在Questions.js的questionElm映射中，给Answers组件传递的holdAnswer={() => holdAnswer(question.answers.id)}存在问题：

• question.answers是一个数组，数组本身没有id属性，所以question.answers.id的值就是undefined，点击时自然输出undefined。

2. 子组件调用函数时未传递正确ID #

在Answers.js中，每个答案div的onClick={props.holdAnswer}只是调用了父组件传来的函数，但没有把当前答案的ID传递进去——即使父组件的函数能接收ID，这里也没传对应的值。

修复方案 #

步骤1：修正父组件的函数传递 #

在Questions.js中，给Answers组件传递holdAnswer时，直接传递函数本身即可，不需要提前绑定错误的ID：

<Answers
  answers={question.answers}
  isChosen={question.isChosen}
  holdAnswer={holdAnswer} // 直接传递函数，让子组件调用时传对应ID
/>

步骤2：子组件调用时传递对应答案ID #

在Answers.js中，每个答案div的onClick需要传递当前答案的ID。同时建议用遍历数组的方式渲染答案，避免硬编码索引（比如props.answers[3]），让代码更健壮：

export default function Answers(props) {
  const styles = {
    backgroundColor: props.isChosen ? "#D6DBF5" : "transparent",
  };

  return (
    <section className="answer-container">
      {props.answers.map(answer => (
        <div
          key={answer.id}
          className="answer-div"
          style={styles}
          onClick={() => props.holdAnswer(answer.id)}
        >
          <p>{answer.answer}</p>
        </div>
      ))}
    </section>
  );
}

额外优化：答案随机排序（可选） #

原代码中正确答案固定在数组索引3的位置，建议在生成allAnswers后添加洗牌逻辑，让答案顺序随机：

const allAnswers = [
  { id: nanoid(), isCorrect: false, answer: item.incorrect_answers[0] },
  { id: nanoid(), isCorrect: false, answer: item.incorrect_answers[1] },
  { id: nanoid(), isCorrect: false, answer: item.incorrect_answers[2] },
  { id: nanoid(), isCorrect: true, answer: item.correct_answer },
].sort(() => Math.random() - 0.5); // 洗牌打乱顺序

验证修改 #

修改完成后，点击任意答案按钮，控制台会正确输出对应的nanoid生成的ID，问题解决。

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