如何为点击的动态生成Checkbox绑定true/false布尔选中状态？

方案1：提交时转换（最简实现，无需额外维护状态） #

你现在用Ant Design的Checkbox.Group默认就能拿到选中的ID数组，不需要额外监听点击事件，只需要在表单提交的时候把数组转换成「ID-选中状态」的布尔值对象即可，代码改动最小：

const [checkboxData, setCheckboxData] = useState(undefined);
useEffect(() => {
  (async () => {
        const data = await request(`/document-type/typeDocuments`, { method: 'get', cancelTokenKey: 'typeDocuments' });
        if (data) { setCheckboxData(data.content); }
   })();
}, []);

// 提交时转换即可
function onFormFinish(values) {
  const selectedIds = values.typesDocuments || [];
  // 生成 ID 对应布尔选中值的对象
  const checkedStatusMap = checkboxData.reduce((result, item) => {
    result[item.id] = selectedIds.includes(item.id);
    return result;
  }, {});
  // 后续直接使用checkedStatusMap即可，格式为 {1: true, 2: false,...}
  console.log(checkedStatusMap);
}

function onFormFailed(errorInfo) {
  console.log('表单校验失败', errorInfo);
}

<Form
    onFinish={onFormFinish}
    onFinishFailed={onFormFailed}
>
    <Form.Item
         name="typesDocuments"
         valuePropName="checked"
    >
        <Checkbox.Group style={{ width: '100%' }}>
             <Row>
                 {/* 单个Checkbox不需要绑定onChange，Group会自动收集选中值 */}
                 {checkboxData?.map(item => <Col span={12} key={item.id}><Checkbox value={item.id}>{item?.Name}</Checkbox></Col>)}
             </Row>
        </Checkbox.Group>
     </Form.Item>

     <Form.Item>
         <Space style={{ display: 'flex', justifyContent: 'end' }}>
              <Button type="primary" htmlType="submit"> {intl("modal-btn-ok")} </Button>
         </Space>
     </Form.Item>
</Form>

方案2：实时维护选中状态对象 #

如果需要在点击Checkbox时就实时拿到最新的选中状态对象，可给Checkbox.Group绑定onChange事件单独维护状态：

const [checkboxData, setCheckboxData] = useState(undefined);
// 新增状态存储ID-布尔选中值映射
const [checkedStatusMap, setCheckedStatusMap] = useState({});

useEffect(() => {
  (async () => {
        const data = await request(`/document-type/typeDocuments`, { method: 'get', cancelTokenKey: 'typeDocuments' });
        if (data) { 
          setCheckboxData(data.content);
          // 初始化所有选项为未选中
          const initMap = data.content.reduce((acc, item) => {
            acc[item.id] = false;
            return acc;
          }, {});
          setCheckedStatusMap(initMap);
        }
   })();
}, []);

// Group的onChange回调，参数就是当前选中的ID数组
function onGroupChange(selectedIds) {
  const newMap = checkboxData.reduce((acc, item) => {
    acc[item.id] = selectedIds.includes(item.id);
    return acc;
  }, {});
  setCheckedStatusMap(newMap);
}

<Form
    onFinish={onFormFinish}
    onFinishFailed={onFormFailed}
>
    <Form.Item
         name="typesDocuments"
         valuePropName="checked"
    >
        {/* onChange绑到Group上，不要绑到单个Checkbox */}
        <Checkbox.Group style={{ width: '100%' }} onChange={onGroupChange}>
             <Row>
                 {checkboxData?.map(item => <Col span={12} key={item.id}><Checkbox value={item.id}>{item?.Name}</Checkbox></Col>)}
             </Row>
        </Checkbox.Group>
     </Form.Item>
     {/* 其余代码不变 */}
</Form>

问题说明 #

你之前代码崩溃的核心原因是把onChange事件错绑到了单个Checkbox上，单个Checkbox的onChange回调参数是当前点击项的事件对象，不是选中ID数组，而且你直接修改了从接口获取的源数据checkboxData，导致渲染异常。

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