React.js单选按钮筛选功能正常但无法正确勾选问题求助

问题原因 #

• 表单单选框的target.value默认返回字符串类型，你定义的filtersByExp数组中的item.value为数字类型，checked属性用严格相等===做判断时，类型不一致会返回false，因此单选框永远无法进入选中状态。
• 初始exp为null的设置符合需求，默认所有单选框都不会选中。

修复方案 #

修改handleRadioChange方法，将获取到的value值转换为数字类型即可：

const handleRadioChange = ({ target }) => {
  let value = Number(target.value); // 新增字符串转数字逻辑
  let name = target.name;
  setFilter({
    ...filter,
    [name]: value,
  });
};

可选兼容方案（不推荐） #

如果不想修改赋值逻辑，也可以将checked的严格相等判断改为非严格相等，会自动做隐式类型转换：

<Form.Check
  type="radio"
  label={item.label}
  name="exp"
  checked={filter.exp == item.value} // 改为非严格相等
  onChange={handleRadioChange}
  value={item.value}
/>

小优化建议 #

你在遍历数组时写的[...filtersByExp]属于冗余操作，直接用filtersByExp.map即可，不会影响原有功能。

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