React递归标签列表问题：Checkbox含checked值却未显示选中状态

更新说明 #

我一直在用一段递归生成标签列表的React代码，运行后发现终端节点的Checkbox能正常显示选中状态，但父节点的Checkbox明明在HTML里带有checked属性，页面上却不显示默认选中状态。

代码示例 #

import React from "react";

class TagElement extends React.Component{
    updateCheck(e){
        var v = (e.target.checked)? e.target.value : false
        this.props.checkEvent(v)
    }

    render(){
        const tag_name = this.props.tagElement;
        const tag_id = Math.random();
        return(
            <div className="form-check">
                <input className    =   "form-check-input" 
                    type            =   "checkbox" 
                    defaultChecked  =   {this.props.checked}
                    name            =   {tag_name}
                    id              =   { tag_id }
                    onChange        =   {(e) => this.updateCheck(e)}
                    />
                <label className="form-check-label" htmlFor={tag_id}>
                    { tag_name  + " " + this.props.checked }
                </label>
            </div>
        )
    }
}

class TagTree extends React.Component{
    state = {
        key : "",
        val : [],
        display : "none"
    }

    onCheck(v){
        this.setState({ display : v? "block" : "none"})
    }

    componentDidMount(){
        const tagkey = Object.keys(this.props.tagTree)[0]
        const tagval = this.props.tagTree[tagkey]
        const includedActiveList = this.props.activeTags.includes(tagkey)

        this.setState(
            {
                key : tagkey,
                val : tagval,
                display : includedActiveList ? "block" : "none"
            }, () => {})
    }

    checkCheck(tag){
        return (this.props.activeTags.includes(tag))
    }

    render(){
        return(
            <React.Fragment>
                <TagElement tagElement={this.state.key} 
                    checkEvent={(v) => this.onCheck(v)}
                    activeTags={this.props.activeTags}
                    checked={this.checkCheck(this.state.key)}
                    />
                <ul className="tag-check-box" style={{display: this.state.display}}>
                    <li>
                        { this.state.val.map( t => (typeof(t) === 'object') ? 
                            <TagTree tagTree={t} checkedTrue={this.state.check} 
                                key={Math.random()}
                                activeTags={this.props.activeTags}/> : 
                            <TagElement tagElement={t} key={Math.random()}
                                activeTags={this.props.activeTags}
                                checked={this.checkCheck(t)}
                                /> )}
                    </li>
                </ul>
            </React.Fragment>
        )
    }
}

class TagApp extends React.Component{
    state = {
        activeTags : ["Algebra", "Sequence and Series", "Types", "Arithmatic Progression", "Arithmatic Mean"]
    }

    render(){
        return(
            <div>
                <div>&nbsp;</div>
                <h4>Select Tags</h4>
                <ul className="tag-check-box">
                    <li>
                        { this.props.tagList.map( t =>  
                            <TagTree tagTree={t} key={Math.random()} 
                                activeTags={this.state.activeTags} /> 
                        )}
                    </li>
                </ul>
            </div>
        )
    }
}

export default TagApp;

问题细节 #

检查页面HTML时，父节点的input标签已经带有checked属性：

<input class="form-check-input" type="checkbox" 
       name="Types" id="Types" value="Types" checked>

但页面上就是不显示该Checkbox处于默认选中状态。

问题原因及修复方案 #

1. 核心原因：非受控组件的初始值只生效一次 #

你用了defaultChecked设置初始选中状态，但TagTree组件是在componentDidMount（初始渲染后）才设置state.key，导致第一次渲染TagElement时this.props.checked是基于空字符串判断的，结果为false。后续props更新时，defaultChecked不会再重新生效——因为它是给非受控组件用的初始值，只在第一次渲染起作用。

2. 次要原因：随机ID导致关联失效 #

用Math.random()生成input的id，每次渲染都会生成新ID，可能导致label和input的关联断开，视觉上显示异常。

修复步骤 #

步骤1：把Checkbox改成受控组件

用checked替代defaultChecked，这样props更新时，选中状态会同步更新：
修改TagElement中的input部分：

<input 
  className="form-check-input" 
  type="checkbox" 
  checked={this.props.checked} // 替换defaultChecked为checked
  name={tag_name}
  id={tag_id}
  onChange={(e) => this.updateCheck(e)}
/>

步骤2：生成稳定的ID

不要用随机数生成ID，改用标签名生成固定ID（确保标签名唯一）：

// 在TagElement的render方法里
const tag_id = `tag-${tag_name}`;

步骤3：提前初始化TagTree的状态

把componentDidMount里的状态初始化移到构造函数里，确保第一次渲染时TagElement就能拿到正确的tagkey和checked值：

class TagTree extends React.Component{
  constructor(props) {
    super(props);
    const tagkey = Object.keys(props.tagTree)[0];
    const tagval = props.tagTree[tagkey];
    const includedActiveList = props.activeTags.includes(tagkey);
    this.state = {
      key: tagkey,
      val: tagval,
      display: includedActiveList ? "block" : "none"
    };
  }

  // 删掉原来的componentDidMount方法

  // 其他代码保持不变
}

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