React中如何在变量已定义时检查单选框选中状态？解决空状态报错

这个问题我之前也碰到过！核心原因就是当answers数组为空时，你通过find方法找不到对应questionID的项，导致checked变量是undefined，这时候再去访问checked.answerValues自然就会抛出类型错误了。下面给你几个实用的解决方案：

方案1：使用可选链操作符（?.）+ 空值合并运算符（??） #

这是ES2020引入的语法，非常简洁，能直接处理undefined的情况：

// 先获取对应的选中项，找不到就是undefined
const checked = this.state.answers.find(a => a.questionID === question.id);

// 渲染单选框时用可选链安全访问answerValues，找不到就用false作为默认值
<input 
  type="radio" 
  name={`question-${question.id}`} 
  checked={option.id == (checked?.answerValues ?? false)} 
/>

checked?.answerValues会在checked为undefined时直接返回undefined，然后?? false把undefined转换成false，这样既不会触发报错，空状态下单选框也不会被选中。

方案2：提前给checked设置默认对象 #

如果你的项目需要兼容不支持ES2020的环境，可以在获取checked的时候就兜底一个默认对象：

// 找不到对应项时，返回一个带有answerValues属性的空对象
const checked = this.state.answers.find(a => a.questionID === question.id) || { answerValues: undefined };

// 此时访问checked.answerValues永远不会报错，空状态下就是undefined，和option.id对比自然是false
<input 
  type="radio" 
  name={`question-${question.id}`} 
  checked={option.id == checked.answerValues} 
/>

方案3：渲染前判断checked是否存在 #

这种方式更直观，适合喜欢显式判断的场景：

const checked = this.state.answers.find(a => a.questionID === question.id);

<input 
  type="radio" 
  name={`question-${question.id}`} 
  checked={checked ? (option.id == checked.answerValues) : false} 
/>

这三种方案都能解决你的问题，个人推荐第一种，代码更简洁现代，只要你的项目配置支持ES2020语法就行（现在大部分React项目都已经支持了）。

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