ReactJS单选按钮预选中状态不显示问题求助

我来帮你排查这个单选按钮初始选中状态的问题！你提到功能正常能把值存到数据库，父组件也拿到了正确的promo_consent值，但就是单选按钮没显示初始选中状态，大概率是初始值没有正确传递到FormChoiceGroup组件，或者组件内部没有正确处理这个值，可以按下面的步骤排查：

1. 检查FormChoiceGroup组件是否正确处理初始值 #

首先看你的单选按钮管理组件，要确保它能接收并使用传入的初始值来设置checked状态。比如组件渲染单选按钮的时候，需要把每个选项的值和传入的promo_consent做匹配，来决定是否选中：

假设你的组件里有类似这样的选项配置：

const promoOptions = [
  { label: '是', value: true },
  { label: '否', value: false }
];

那渲染每个单选按钮的时候，要这样设置checked属性：

promoOptions.map(option => (
  <label key={option.value}>
    <input
      type="radio"
      name={props.name}
      value={option.value}
      // 关键：用传入的初始值和选项值做匹配
      checked={option.value === props.value}
      onChange={(e) => props.onChange(e.target.value === 'true')}
    />
    {option.label}
  </label>
))

这里要注意值的类型匹配：如果promo_consent是布尔值（true/false），那选项的value也要是布尔值；如果选项的value是字符串（比如"true"/"false"），那要把传入的props.value转成字符串再比较，比如option.value === String(props.value)，否则类型不匹配会导致checked判断失败。

2. 确认初始值是否正确传递到FormChoiceGroup组件 #

检查你的面板主模块里传递的data: { [PROMO_CONSENT]: promo_consent }是否真的到达了FormChoiceGroup组件。可以在组件里加个console.log(props)，看看有没有拿到value或者对应字段的初始值。

另外看表单模块的配置，要确保表单的data被正确映射到字段组件上。比如你的字段配置里，有没有把form的data[PROMO_CONSENT]作为value传递给FormChoiceGroup？如果表单框架没有自动做这个映射，你可能需要手动在字段配置里加上value: formData[PROMO_CONSENT]之类的配置。

3. 排查表单框架的数据绑定逻辑 #

如果你们用了自定义的表单框架（从代码片段看像是自己封装的），要确认框架是否支持把form的data自动传递给字段组件的value属性。比如在表单模块的配置里，字段的定义是否正确关联了form的data，确保FormChoiceGroup能拿到对应的初始值。

举个例子，如果表单框架需要字段配置里指定initialValue，那你可能需要在字段配置里加上：

{
  name: PROMO_CONSENT,
  label: _t(panelMessages.promoLabel),
  component: FormChoiceGroup,
  type: 'radio',
  isRequired: false,
  initialValue: formData[PROMO_CONSENT] // 手动传入初始值
}

总结 #

最常见的问题就是值的类型不匹配或者初始值没有正确传递到组件内部，先从这两点入手排查，应该就能解决初始选中状态不显示的问题啦！

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