React父组件DiceRow向子组件Die传值显示undefined，骰子不渲染

核心错误定位 #

你代码里的关键问题出在DiceRow组件的initDice函数中，传递给Die组件的value取值方式错误：

// 错误写法
value={this.state.dices[{i}]}

这里的{i}是一个包含i属性的对象（等价于{i: i}），用它作为数组索引会返回undefined——因为数组仅接受数字或字符串类型的索引。这直接导致子组件Die的this.props.value为undefined，Font Awesome的图标类名变成fa-dice-undefined，自然无法渲染出正确的骰子图标。

修复步骤 #

1. 修正value的取值方式
   把initDice里的错误代码改成：

// 正确写法
value={this.state.dices[i]}

2. 完善handleDieClick的传参逻辑
   当前handleDieClick方法没有实现骰子禁用状态的切换逻辑，需要修改Die组件的点击事件绑定，同时补全方法实现：

// 在DiceRow的initDice中修改onClick绑定
dices[i] = <Die onClick={() => this.handleDieClick(i)} value={this.state.dices[i]} key={i} id={i}/>

// 补全handleDieClick方法
handleDieClick(id){
    // 复制原数组，避免直接修改state
    const newIsDisabled = [...this.state.isDisabled];
    newIsDisabled[id] = !newIsDisabled[id];
    this.setState({ isDisabled: newIsDisabled });
}

3. 添加undefined边界处理（可选）
   为了防止value为undefined时图标加载异常，可以在Die组件里设置默认值：

// Die组件的render部分
const dieValue = this.props.value || 1; // 默认显示1点骰子
let whichDie = <i className={`fa-solid fa-dice-${dieValue} fa-5x`}></i>

修复后的关键代码片段 #

DiceRow组件的handleDieClick和initDice

handleDieClick(id){
    const newIsDisabled = [...this.state.isDisabled];
    newIsDisabled[id] = !newIsDisabled[id];
    this.setState({ isDisabled: newIsDisabled });
}

initDice(){
    let dices = [];
    for(let i=0; i<this.state.dices.length; i++){
        dices[i] = <Die onClick={() => this.handleDieClick(i)} value={this.state.dices[i]} key={i} id={i}/>
    }
    return dices;
}

Die组件的render部分

render() {
    const dieValue = this.props.value || 1;
    let whichDie = <i className={`fa-solid fa-dice-${dieValue} fa-5x`}></i>
    
    return (
        <div className='Die'>
            {whichDie}
        </div>
    )
}

额外优化建议 #

handleRoll方法可以用map简化逻辑，避免索引赋值可能出现的空位问题：

handleRoll(){
    const newDicesValues = this.state.dices.map((val, idx) => {
        return this.state.isDisabled[idx] ? val : rollDie();
    });
    this.setState({ dices: newDicesValues });
}

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