React Checkbox警告：受控输入被改为非受控输入问题排查

你遇到的Warning: A component is changing a controlled input to be uncontrolled警告，核心原因是复选框的checked属性接收的值类型不稳定，不符合React受控组件的要求：

• React要求受控表单元素的checked/value属性必须始终接收确定的同类型值，不能在布尔值、undefined、对象等类型之间来回切换
• 你当前代码里checked属性的逻辑调用了pdtGenders.find(...)：当匹配到对应性别时，find返回的是整个性别对象（非布尔真值）；当没匹配到时返回undefined；你额外加的长度判断又会返回显式false。三种类型的值交替传给checked，React就会判定你在受控/非受控模式之间切换，直接抛出警告。
• 额外隐患：如果父组件初始化时没有给pdtGenders设置默认空数组，第一次渲染时pdtGenders为undefined，也会加剧这个类型波动问题。

1. 统一checked属性的返回值为布尔类型：永远不要给表单受控属性传对象、undefined这类非预期值，用可选链+布尔强转就能解决核心问题，把原有的checked逻辑替换为：

checked={!!pdtGenders?.find((item) => item.name === listItem.name)}

逻辑说明：

• 可选链?.会在pdtGenders为null/undefined时直接短路返回undefined，不会抛运行时错误
• 双非运算符!!会把所有返回值统一强转为布尔值：找到匹配项时为true，未找到/数组为空/pdtGenders不存在时为false，彻底消除类型波动。

2. 可选优化：列表渲染的key不要用数组下标，替换为业务唯一ID避免DOM错位：

// 原代码 <li key={index}>
<li key={listItem.id}>

3. 源头兜底：父组件传入pdtGenders时，确保初始值为空数组[]，不要传undefined。

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