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 { Upload } from '@douyinfe/semi-ui';
import { IconPlus } from '@douyinfe/semi-icons';


export default function SemiDesign() {
    const listDatga = []
    const initArr = [] as any[];
    const [visible, setVisible] = useState(false);
    const [SongALL, setSongALL] = useState(initArr);
    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]);
        // fetchAllPlaylists().then((songData) => {
        //     console.log(songData)
        //     console.log(songData[0])
        //     // listDatga= songData[0]
        //     // SongALL= songData[0]
        //     // setSongALL(songData)
        
        // })
        // .catch((error) => {
        //     console.log(error);
        // });
    }


    

    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}
                            </div>
                        ))}
                    </div>

                
                
         
            </div>

        </>
    )
}