React组件状态修改报错排查：toggle触发map读取undefined问题

你的问题出在toggle函数的状态更新逻辑里：

当你调用prevData.map((question) => { return question.answers.map(...) })时，你把原本的question对象直接替换成了answers数组。更新后的data数组里，每个元素不再是包含question和answers属性的对象，而是变成了纯answers数组。

后续渲染questBlocks时，elem变成了数组，自然找不到elem.answers属性，调用elem.answers.map()就会抛出Cannot read properties of undefined (reading 'map')的错误。

修复后的toggle函数 #

你需要在更新answers的同时，保留原question对象的所有属性，只替换answers字段：

function toggle(id) {
  setData((prevData) => {
    return prevData.map((question) => {
      // 保留原question的其他属性，只更新answers数组
      return {
        ...question,
        answers: question.answers.map((answer) => {
          return answer.id === id
            ? { ...answer, selected: !answer.selected }
            : answer;
        })
      };
    });
  });
}

额外建议 #

• 尽量避免用数组索引index作为key，如果你的question对象有唯一id，改用question.id作为外层div的key，这能避免React渲染时的不必要重排。
• 确保初始的data结构里，每个question对象都有answers数组，且每个answer都有id和selected属性，避免渲染时的潜在报错。

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