单选框defaultChecked绑定变量判断条件不生效问题咨询

核心原因：defaultChecked 仅在组件首次渲染时生效 #

defaultChecked 是 React 非受控表单组件的初始值属性，它只会在组件第一次挂载时读取一次值并设置选中状态，后续即使绑定的表达式值发生变化，也不会再更新组件的选中状态。

你遇到的情况大概率是：

• 组件首次渲染时，memoInfo.colour 的值并不是 "red"（比如异步数据还未加载完成，此时值为 undefined/null 或其他值），导致 memoInfo.colour == "red" 的结果为 false，defaultChecked 被设置为 false；
• 之后 memoInfo 数据更新，memoInfo.colour 变为 "red"，此时你打印的表达式结果是 true，但 defaultChecked 不会再重新执行，所以单选框依然保持未选中状态；
• 而硬编码 true 时，首次渲染就会把 defaultChecked 设置为 true，所以功能正常。

解决办法 #

1. 改用受控组件（推荐）：使用 checked 属性替代 defaultChecked，并配合 onChange 事件同步状态。这样只要 memoInfo.colour 变化，单选框的选中状态就会自动更新：

<input 
  type="radio" 
  id="red" 
  name="colour" 
  value="red" 
  required 
  checked={memoInfo.colour == "red"}
  onChange={(e) => { /* 这里可以更新memoInfo.colour的状态 */ }}
/>

2. 确保首次渲染时memoInfo.colour已正确赋值：如果坚持用非受控组件，需要保证组件首次渲染时 memoInfo.colour 已经是 "red"（比如在组件挂载前就完成数据初始化，或者添加加载状态，等数据就绪后再渲染该单选框）。

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