React自定义RadioButton首次点击无法选中值的问题求助

问题根源 #

1. 数组索引作为React元素key的隐患：在sortByData.map中使用索引i作为key，当组件状态更新时，React会复用旧的组件实例，导致单选按钮的选中状态无法及时同步到UI。
2. TypeScript类型定义错误：useState<String>('none')使用了大写的String（对象类型），而单选按钮的value是基本类型string，类型不匹配可能导致隐性的比较异常。
3. 自定义样式的触发逻辑依赖：如果checkmark的选中样式是通过CSS伪类input:checked实现的，若组件状态与DOM属性同步不及时，会导致首次点击时样式不生效。

修复步骤 #

1. 替换map的key为唯一标识

将SortBy组件中map的key={i}改为key={d.id}，确保每个单选按钮组件拥有唯一且稳定的key，避免React复用错误的组件实例：

{sortByData?.map((d: any) => {
  return (
    <div className="Radiochildren" key={d.id}>
      <CustomRadioButton
        label={d?.label}
        id={d?.id}
        name={d?.name}
        onChange={handleOnchange}
        isChecked={sortValue === d?.id}
      />
    </div>
  );
})}

2. 修正TypeScript状态类型

将useState<String>('none')改为useState<string>('none')，使用正确的基本类型匹配单选按钮的value：

const [sortValue, setSortValue] = useState<string>('none')

3. 确保自定义样式正确绑定选中状态

检查CSS样式，确保checkmark的选中状态基于input的checked属性触发，示例：

.customRadio input:checked + .checkmark {
  background-color: #2196F3;
  border-color: #2196F3;
}
.customRadio .checkmark {
  height: 20px;
  width: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

4. 优化状态更新逻辑（可选）

使用函数式更新确保获取最新状态值，避免异步更新导致的潜在问题：

const handleOnchange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setSortValue(_ => e.currentTarget.value);
};

修复后效果 #

完成上述修改后，首次点击单选按钮时，React会正确识别每个组件的唯一性，状态更新后UI会同步渲染选中状态，不会再出现二次点击才生效的问题。

内容的提问来源于stack exchange，提问作者Sharan K M