Как заполнить значение из API в checkbox.Group с помощью antd

использовать имя вместо значения в компоненте флажка.

<Checkbox name = "view">

и используйте крючок формы ...

const [form] = Form.useForm();
<Form form = {form}>

и вы должны использовать

form.setFieldsValue()

для заполнения входных данных

Чтобы заставить его работать с помощью Form, вам нужно указать name prop для Form.Item. В вашем случае имя будет agmdb, agent, users.

В useEffect получите все userPermissions и при необходимости сохраните их в состоянии. Формат значения группы флажков должен быть массивом строк ['view', 'edit']. Но у userPermission другой формат, где значение представляет собой пару ключ-значение. Поэтому нам нужно отфильтровать те ключи, которые имеют значение true. Затем установите значения в форме. Поскольку у каждого Checkbox.Group есть 4 параметра, я создал массив параметров с меткой и значением. Вы также можете использовать disabled в параметрах, если вам это нужно. При отправке вам может потребоваться исходный формат данных. Я также пишу код, который преобразует значения в исходный формат. Надеюсь, это решит вашу проблему

import { useEffect } from 'react';
import { Button, Checkbox, Form } from 'antd';

const menu = [
    { label: 'System', level: 1, view: true, add: true, edit: true, del: true, key: 'agmdb' },
    { label: 'Agent', level: 1, view: true, add: true, edit: true, del: true, key: 'agent' },
    { label: 'User', level: 2, view: true, add: true, edit: true, del: true, key: 'users' }
];

const userPermission = {
    agent: { view: true, edit: true, del: false, add: false },
    agmdb: { view: true, edit: false, del: true, add: false },
    users: { view: true, edit: false, del: false, add: true }
};

const options = [
    { label: 'View', value: 'view' },
    { label: 'Add', value: 'add' },
    { label: 'Edit', value: 'edit' },
    { label: 'Delete', value: 'del' }
];

const App = () => {
    const [form] = Form.useForm();

    useEffect(() => {
        // Fetch userPermission from API
        // Each Checkbox.Group value is an array of string (true means checked)
        // Example: { agmdb: ['view', 'del'], agent: ['view'], users: ['view', 'add'] }

        const data: Record<string, Array<string>> = {};

        Object.entries(userPermission).forEach(([key, value]) => {
            data[key] = Object.keys(value).filter((key) => value[key as keyof typeof value]);
        });

        form.setFieldsValue(data);
    }, [form]);

    const onFinish = (values: any) => {
        const finalData: Record<string, Record<string, boolean>> = {};

        Object.entries(values).forEach(([key, value]: any) => {
            finalData[key] = value.reduce((acc: any, cur: string) => {
                acc[cur] = true;
                return acc;
            }, {});
        });

        console.info(finalData);
    };

    return (
        <div className='App'>
            <Form form = {form} onFinish = {onFinish}>
                {menu.map((item) => {
                    return (
                        <Form.Item
                            key = {item.key}
                            style = {{ margin: '10px 0' }}
                            labelCol = {{ span: 6 }}
                            wrapperCol = {{ span: 12 }}
                            label = {item.label}
                            name = {item.key}
                        >
                            <Checkbox.Group options = {options} />
                        </Form.Item>
                    );
                })}

                <Button htmlType='submit'>Submit</Button>
            </Form>
        </div>
    );
};

export default App;