javascript - react的antd checkbox组件，在编辑的时候无法初始化选中，我想了4个小时解决不了，原因是什么？

Question

import React, { useState, useEffect, useRef } from 'react'import {  Form,  Input,  Select,  Tooltip,  Row,  Col,  message,  Button,  Typography,  Card,  Space,  Modal,  Popconfirm,  Drawer,  Checkbox,  Tag,  Spin,} from 'antd'import type { CheckboxValueType } from 'antd/es/checkbox/Group'import { PlusCircleOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons'import { getDemandProtocolTemplateGetItemList } from '@apps/apis'import { formatTimeString } from '@/utils'import moment from 'moment'import { validatorByte } from '../../validator'import style from './index.less'const { TextArea } = Inputconst layout: any = {  colon: false,  labelCol: { style: { width: '100px' } },  wrapperCol: { span: 9 },  labelAlign: 'left',}interface Iprops {  currentRef: any  fetchdata: any  onBadge: (num: number, idx: number) => void}const TempletInfo: React.FC<Iprops> = (props: any) => {  const { currentRef, fetchdata, onBadge } = props  const [form] = Form.useForm()  const [loading, setLoading] = useState<boolean>(false)  const [isModalOpen, setIsModalOpen] = useState(false)  const [isDrawerOpen, setIsDrawerOpen] = useState(false)  const result = useRef<any>([])  const [resultExport, setresultExport] = useState<any>([])  const [idxInit, setidxInit] = useState(-1)  const [idxInitSource, setidxInitSource] = useState(-1)  const [itemSource, setitemSource] = useState<any>([])  const [defaultCheckboxValue, setdefaultCheckboxValue] = useState<any>([])  const DrawerOpen = (e, idx: number) => {        setidxInitSource(idx)                const defaultCheckboxValue = result.current[idx].protocolTemplateGroupItemList?.map(                      (ele) => ele.id + '___' + ele.name,                )                let arr = [...defaultCheckboxValue]                console.log(arr)                setdefaultCheckboxValue(arr)        setIsDrawerOpen(true)  }  const showModal = (e, idx: number) => {    setidxInit(idx)    if (idx > -1) {      form.setFieldsValue({        name: result.current[idx].name,        sort: result.current[idx].sort,      })    }    setIsModalOpen(true)  }  const handleOk = () => {    form.validateFields().then((res) => {      if (idxInit > -1) {        result.current[idxInit]['name'] = res.name        result.current[idxInit]['sort'] = res.sort || 0      } else {        result.current.push({          name: res.name,          sort: res.sort || 0,          protocolTemplateGroupItemList: [],        })      }      setresultExport(result.current)      setIsModalOpen(false)    })  }  const handleDelete = (idx) => {    const arr = [...result.current]    arr.splice(idx, 1)    result.current = arr    setresultExport(arr)  }  const handleCancel = () => {    setIsModalOpen(false)  }  const onDrawerClose = () => {    setIsDrawerOpen(false)  }  const onChangeCheckbox = (checkedValues: CheckboxValueType[]) => {    const arr = [...result.current]    const checkedValuesTMP = [...checkedValues]    const checkedValuesArr = checkedValuesTMP.map((ele) => {      let tmp = ele.split('___')      return {        id: tmp[0],        name: tmp[1],        sort: 0,      }    })    arr[idxInitSource].protocolTemplateGroupItemList = []    arr[idxInitSource].protocolTemplateGroupItemList = checkedValuesArr    const defaultCheckboxValue = checkedValuesArr?.map((ele) => ele.id + '___' + ele.name)    let arrtmp = [...defaultCheckboxValue]    setdefaultCheckboxValue(arrtmp)    result.current = arr    setresultExport(arr)  }  useEffect(() => {        setLoading(true)        getDemandProtocolTemplateGetItemList().then((res) => {          if (res.code === 1000) {            setLoading(false)            setitemSource(res.data)          }        })    currentRef.current = {      get: () =>        new Promise((resolve: any) => {          resolve({            state: true,            name: 'templet',            data: result.current,          }).catch((error) => {            if (error && error.errorFields) {            }          })        }),    }  }, [])  useEffect(() => {    if (fetchdata['protocolTemplateGroupList']?.length > 0) {      result.current = fetchdata['protocolTemplateGroupList']      setresultExport(result.current)            setLoading(true)            getDemandProtocolTemplateGetItemList().then((res) => {              if (res.code === 1000) {                setLoading(false)                setitemSource(res.data)              }            })    }  }, [fetchdata['protocolTemplateGroupList']])  return (    <>      <Spin spinning={loading}>        <Drawer forceRender title="添加项目" placement="right" onClose={onDrawerClose} open={isDrawerOpen}>          <Checkbox.Group            style={{ width: '100%' }}            key={defaultCheckboxValue}            defaultValue={defaultCheckboxValue}            onChange={(checkedValues) => onChangeCheckbox(checkedValues)}          >            {itemSource?.map((item, idx) => {              return (                <React.Fragment key={+new Date() + '_' + idx}>                  <Row>                    <Col span={24}>                      <div style={{ fontWeight: 'bold', marginBottom: '10px' }}>{item.groupName}</div>                    </Col>                  </Row>                  <Row>                    {item.protocolItemGroupList?.map((item2, idx2) => {                      return (                        <React.Fragment key={+new Date() + '_' + idx + '_' + idx2}>                          <Col span={6} style={{ display: 'inline-block' }}>                            <div style={{ marginBottom: '15px' }}>                              <Checkbox value={item2.id + '___' + item2.itemName}>{item2.itemName}</Checkbox>                            </div>                          </Col>                        </React.Fragment>                      )                    })}                  </Row>                </React.Fragment>              )            })}          </Checkbox.Group>        </Drawer>        <Modal title="新建分组" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>          <Form {...layout} form={form} className={style.form}>            <Form.Item              label="分组名称"              name="name"              rules={[                { required: true, message: '请输入分组名称' },                {                  validator: (r, v) => validatorByte(v, 60),                },              ]}            >              <Input maxLength={60} placeholder="请输入" />            </Form.Item>            <Form.Item label="排序" name="sort">              <Input maxLength={60} placeholder="请输入" />            </Form.Item>          </Form>        </Modal>        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>          <Button type="primary" onClick={(e) => showModal(e, -1)}>            新建分组          </Button>          {resultExport?.map((item, idx) => {            return (              <Card                key={idx}                title={item.name}                bordered={true}                style={{ background: '#f0f2f5' }}                actions={[                  <Button type="link" onClick={(e) => showModal(e, idx)}>                    <FormOutlined />                    编辑                  </Button>,                  <>                    <Popconfirm                      title={'确定删除吗'}                      okText={'确定'}                      cancelText={'取消'}                      onConfirm={() => handleDelete(idx)}                    >                      <Button type="link" danger>                        <DeleteOutlined />                        删除                      </Button>                    </Popconfirm>                  </>,                ]}              >                {item.protocolTemplateGroupItemList?.map((item2, idx2) => {                  return (                    <Tag key={idx2} color="#1db599" style={{ marginRight: '10px' }}>                      {item2.name}                    </Tag>                  )                })}                <br />                <Button type="link" onClick={(e) => DrawerOpen(e, idx)}>                  <PlusCircleOutlined />                  添加项目                </Button>              </Card>            )          })}        </Space>      </Spin>    </>  )}export default TempletInfo

自己研究了4个多小时了，搞不定，react的ant design组件，编辑的时候，checkbox无法初始化选中

Answer 1

Checkbox Group 里用value控制下