ReactJS中如何判断值存在于数组时将对应Checkbox设为选中状态

问题根因 #

你代码里的核心问题是类型不匹配：

• 待渲染的尺码数组[40,41,42,43,44,45]里的元素是number类型
• 状态productForm.sizes里存储的元素是string类型
  JS的Array.includes()方法用的是严格相等（===）判断，41 === "41"结果为false，所以checked属性始终不生效。

解决方案 #

方案1：统一状态存储的类型为数字 #

直接把状态里的sizes改成数字数组即可：

const [productForm, setProductForm] = useState({
    sizes: [41, 42, 43], // 把字符串元素改为数字类型
});

方案2：判断时做类型转换 #

如果不想改动状态的存储格式，在判断includes的时候统一转成相同类型即可：

checked={productForm.sizes.includes(String(size))}

补充：配套的handleCheckBox实现 #

为了避免后续操作再次出现类型不匹配问题，这里给出标准的复选框变更处理逻辑：

const handleCheckBox = (e) => {
  // 此处转数字/字符串和你状态存储的类型保持一致即可，这里以转数字为例
  const currentVal = Number(e.target.value);
  setProductForm(prev => {
    const newSizes = prev.sizes.includes(currentVal) 
      ? prev.sizes.filter(item => item !== currentVal) // 已选中则移除该值
      : [...prev.sizes, currentVal]; // 未选中则新增该值
    return {
      ...prev,
      sizes: newSizes
    }
  })
}

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