react 请求数据渲染表单提交

import React, { useState } from 'react'
import {
    Select,
    Slider,
    Table,
    SideSheet,
    Button,
    TagInput,
    Spin,
} from '@douyinfe/semi-ui'
import { fetchPlayLists } from 'api/playlist'
//
import { fetchAllCatlist, fetchAllPlaylists } from 'api/playlist'
import { Form, Tooltip } from '@douyinfe/semi-ui'
import { IconHelpCircle } from '@douyinfe/semi-icons'

import { Upload } from '@douyinfe/semi-ui'
import { IconPlus } from '@douyinfe/semi-icons'

export default function SemiDesign() {
    const { Option } = Form.Select
    const listDatga = []
    const initArr = [] as any[]
    const [visible, setVisible] = useState(false)
    const [SongALL, setSongALL] = useState(initArr)
    const [fomrData, setfomrData] = useState({})
    const change = () => {
        setVisible(!visible)
    }

    const handleClick = () => {
        fetchAllCatlist().then((playlist) => console.log(playlist))
    }

    const clickSong = async () => {
        const response = await fetchAllPlaylists()
        console.log(response)
        setSongALL(response[0])
        
    }
    const submitForm = () =>{
        console.log(fomrData)
    }
    const list = [
        { value: 'abc', label: '抖音', otherKey: 0 },
        { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
        { value: 'jianying', label: '剪映', otherKey: 2 },
        { value: 'toutiao', label: '今日头条', otherKey: 3 },
    ]

    const columns = [
        {
            title: '标题',
            dataIndex: 'name',
        },
        {
            title: '大小',
            dataIndex: 'size',
        },
        {
            title: '所有者',
            dataIndex: 'owner',
        },
        {
            title: '更新日期',
            dataIndex: 'updateTime',
        },
    ]
    const data = [
        {
            key: '1',
            name: 'Semi Design 设计稿.fig',
            nameIconSrc:
                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
            size: '2M',
            owner: '姜鹏志',
            updateTime: '2020-02-02 05:13',
            avatarBg: 'grey',
        },
        {
            key: '2',
            name: 'Semi Design 分享演示文稿',
            nameIconSrc:
                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
            size: '2M',
            owner: '郝宣',
            updateTime: '2020-01-17 05:31',
            avatarBg: 'red',
        },
        {
            key: '3',
            name: '设计文档',
            nameIconSrc:
                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
            size: '34KB',
            owner: 'Zoey Edwards',
            updateTime: '2020-01-26 11:01',
            avatarBg: 'light-blue',
        },
    ]
    return (
        <>
            <div className="semi-boxd">
                <Select placeholder="请选择业务线" style={{ width: 180 }} optionList={list}></Select>

                <Slider defaultValue={[20, 60]} range></Slider>

                <Table columns={columns} dataSource={data} pagination={false} />

                <Button type="secondary" onClick={change}> 侧边栏 </Button>

                <SideSheet title="滑动侧边栏" visible={visible} onCancel={change}>
                    <p>This is the content of a basic sidesheet.</p>
                    <p>Here is more content...</p>
                </SideSheet>

                <TagInput defaultValue={['抖音', '火山', '西瓜视频']} placeholder="请输入..." onChange={(v) => console.log(v)}/>
                <Button type="secondary" onClick={handleClick}> 请求数据 </Button>

                <div> <Spin size="large" /> </div>

                <Button type="secondary" onClick={clickSong}> 所有歌曲 </Button>

                <div>
                    {SongALL.map((item) => (
                        <div key={item.id}>
                            请求数据的————————{item.name}
                            <img
                                className="img-item"
                                src={item.coverImgUrl}
                                alt="像风一样自由～"
                                loading="lazy"
                            />
                        </div>
                    ))}
                </div>

                <Form
                    layout="horizontal"
                    onValueChange={(values) => setfomrData(values)}
                >
                    <Form.Input field="UserName" label="用户名" style={{ width: 80 }} />
                    <Form.Input
                        field="Password"
                        label={{
                            text: '密码',
                            extra: (
                                <Tooltip content="详情">
                                    <IconHelpCircle
                                        style={{ color: 'var(--semi-color-text-2)' }}
                                    />
                                </Tooltip>
                            ),
                        }}
                        style={{ width: 176 }}
                    />
                    <Form.Select field="Role" label={{ text: '角色', optional: true }} style={{ width: 176 }}>
                        <Option value="admin">管理员</Option>
                        <Option value="user">普通用户</Option>
                        <Option value="guest">访客</Option>
                    </Form.Select>
                    <Button type="secondary" onClick={submitForm}> 提交数据 </Button>
                </Form>
            </div>
        </>
    )
}