React页面加载后单选框/复选框选中状态不渲染问题排查

问题核心成因 #

1. 错误使用defaultChecked属性
   React 中表单组件分为受控组件与非受控组件两种模式：

• defaultChecked是非受控组件专属属性，仅会在组件首次挂载渲染时生效一次，后续无论对应props如何更新，该属性都不会重新计算、触发选中状态变更
• 你从接口拉取数据更新父组件state是在子组件挂载完成后才执行的，此时子组件的defaultChecked已经完成初始化，自然不会响应最新的prop值，只有重新挂载组件（切换显隐）才会重新读取prop值渲染选中状态
• 文本输入类组件你使用的是value而非defaultValue，属于受控组件模式，所以可以正常回显，和单选框/复选框的差异就在这里。

2. 其他潜在关联问题（非核心但建议修正）

• 父组件构造函数中存在绑定笔误：this.handleChangek = this.handleChange.bind(this); 变量名多写了k，若实际运行正常大概率是代码录入错误。
• 表单onChange事件建议直接绑定到Form.Check控件上，而非外层Form.Group，避免事件冒泡带来的异常。

修复方案 #

将子组件中两个单选框的defaultChecked属性替换为受控组件使用的checked属性即可：

<Form.Check
    inline
    type="radio"
    label="Yes"
    value="yes"
    name="formIsBoxChecked"
    id="formIsBoxChecked-Yes"
    checked={this.props.formIsBoxChecked === "yes"}
/>
<Form.Check
    inline
    type="radio"
    label="No"
    value="no"
    name="formIsBoxChecked"
    id="formIsBoxChecked-No"
    checked={this.props.formIsBoxChecked === "no"}                               
/>

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