React JS中筛选Checkbox模态框内外同步选中问题求助

1. 修正状态更新逻辑 #

原代码直接修改isChecked数组（push/splice）属于状态突变，React无法检测到这种变化，导致UI不同步。改成不可变的方式更新状态：

const handleSingleCheck = (e) => {
  const { name, checked } = e.target;
  let newCheckedList;
  if (checked) {
    // 选中时创建新数组添加当前项
    newCheckedList = [...isChecked, name];
  } else {
    // 取消时过滤掉当前项生成新数组
    newCheckedList = isChecked.filter(id => id !== name);
  }
  setIsChecked(newCheckedList);
  catfilter();
};

2. 给所有复选框绑定checked属性 #

不管是外部还是模态框内的复选框，都要基于isChecked数组判断选中状态，两者共享同一状态后就能自动同步：

{categapi.map((data, index) => (
  <Form.Check
    onChange={props.handleSingleCheck}
    key={index}
    name={data.category_id}
    label={data.category_name}
    type="checkbox"
    id={data.category_name}
    // 核心：绑定checked状态，同步选中状态
    checked={isChecked.includes(data.category_id)}
    // 模态框内已选中项禁用（按需求保留）
    disabled={props.isModal && isChecked.includes(data.category_id)}
  />
))}

3. 关键注意点 #

• 确保isChecked是通过useState声明的组件状态：

  const [isChecked, setIsChecked] = useState([]);
  

• 模态框内的禁用逻辑通过props.isModal区分（需要父组件传递该标识，标记当前是否是模态框内的复选框），保证只有模态框内的已选项才会禁用，同时选中状态始终和外部同步。

内容的提问来源于stack exchange，提问作者Asmath S