import React , { useEffect , useCallback , useState , useMemo } from 'react' ; import './SongListBody.scss' ; import { TopPlaylist , TopPlaylistHighquality } from 'src/utils/Http/SongList/SongList' ; import loadable from "@loadable/component" ; const MusicList = loadable ( ( ) => import ( "../../../../../components/MusicList/MusicList" ) ) ; const Pagination = loadable ( ( ) => import ( 'src/components/Pagination/Pagination' ) ) ; import eventBus from 'src/components/EventBus/EventBus' ; const SongListBody = ( props ) => { const [ getMusicListState , setMusicListState ] = useState < [ ] > ( [ ] ) ; const [ getPage , setPage ] = useState < number > ( 0 ) ; const [ getDefaultToal , setDefaultToal ] = useState < number > ( 35 ) ; const [ getNowChoicPage , setNowChoicPage ] = useState < number > ( 1 ) ; const [ getUpdateTime , setUpdateTime ] = useState < number > ( 0 ) ; const [ getMusicType , setMusicType ] = useState < string > ( "全部" ) ; useEffect ( ( ) => { getChoicNameList ( props . name , props . getHot ) ; eventBus . On ( "type" , busFn ) ; return eventBus . Off ( "type" ) ; } , [ props . name , props . getHot ] ) ; const busFn = ( msg ) => { console . log ( msg , 'msg' ) ; setMusicType ( msg ) ; } ; /**
     * 歌单分类widget
     */ const musicList = getMusicListState . map ( ( data , index ) => { return ( < li className = "musicListBox" key = { index } > < MusicList item = { data } /></li > ) ; } ) ; param name const getChoicNameList = useCallback ( async ( name , hot ? ) => { const data = await TopPlaylist ( name , getDefaultToal , 'hot' ) ; const page = Math . ceil ( data . total / getDefaultToal ) ; setPage ( page ) ; console . log ( page , ' 77' ) ; setMusicListState ( data . playlists ) ; console . log ( data . playlists . slice ( getDefaultToal - 1 , getDefaultToal ) [ 0 ] . updateTime , 'data.playlists.pop().updateTime' ) ; setUpdateTime ( data . playlists . slice ( getDefaultToal - 1 , getDefaultToal ) [ 0 ] . updateTime ) ; } , [ getMusicListState , getUpdateTime ] ) ; param index const changePagination = useCallback ( async ( index ) => { console . log ( index , `请求页码` ) ; setNowChoicPage ( index ) ; const data = await TopPlaylistHighquality ( getDefaultToal * getNowChoicPage , getUpdateTime , getMusicType ) ; setMusicListState ( data . playlists . slice ( getDefaultToal * ( getNowChoicPage - 1 ) , data . playlists . length ) ) ; window . scrollTo ( 0 , 0 ) ; console . log ( data ) ; } , [ getNowChoicPage , getMusicListState ] ) ; useEffect ( ( ) => { setMusicListState ( getMusicListState ) ; } , [ getMusicListState ] ) ; return ( < div className = "SongListBody" > < ul > { musicList } < /ul> < Pagination page = { getPage } changePagination = { changePagination } / > < /div>); } ; export default SongListBody ;