React中map生成的MUI Radio按钮不显示选中状态如何解决

问题原因 #

你在map遍历渲染银行卡选项时，把<RadioGroup>组件写在了循环内部，导致每一张银行卡对应的单选按钮都属于独立的Radio分组。MUI的单选按钮选中视觉状态，依赖同个RadioGroup下绑定的value值和子Radio的value值匹配来触发，分散在独立分组里的Radio无法接收到外层state的匹配信号，所以即使state更新成功，也不会展示选中样式。

修复方法 #

• 将<RadioGroup>移动到遍历循环的外层，让所有银行卡对应的单选按钮归属同一个分组，统一在RadioGroup上绑定value和onChange属性
• 循环内部只保留单选项对应的<FormControlLabel>即可，不需要重复渲染RadioGroup
• 可以简化选中回调逻辑：RadioGroup的onChange事件只会在选中项变化时触发，不需要额外判断e.target.checked，直接取事件的value更新state即可
• 给map遍历的最外层节点加上唯一key属性，避免React渲染时出现状态异常

修复后代码 #

checkCard(e){
    console.log('checkid',e.target.value)
    this.setState({
        cardNo: e.target.value
    })
}

<FormControl>
    <DialogContentText>
        Please select the Card for the payment
    </DialogContentText>
    {/* 单选组移到循环外层，统一控制选中状态 */}
    <RadioGroup 
        name="cardsList"
        value={this.state.cardNo}
        onChange={(e)=>this.checkCard(e)}
    >
    {
    this.state.cardDetails.cardDetails.map((cards) => (
        <Card sx={{minWidth: 300}} key={cards.cardId}>
            <Typography variant="h6" component="div">
                {cards.maskCardNo}
            </Typography>
            <Typography></Typography>
            <Box sx={{display: 'row'}}>
                <Typography>
                    {cards.cardType === 'MASTERCARD' ?
                    <img src={master} className='card-logo-select' alt='card Type' /> :
                    <img src={visa} className='card-logo-select' alt='card Type' />
                    }
                    <FormControlLabel 
                        sx={{display: 'row',float:'right'}}
                        value={cards.cardId} 
                        control={<Radio />}
                    />
                </Typography>
            </Box>
        </Card>
        )) 
    }
    </RadioGroup>
</FormControl>

补充：如果需要保留原有的选中逻辑校验，判断checked的逻辑也可以保留，不影响最终效果，核心问题就是RadioGroup重复渲染导致的分组隔离。

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