Reactjs 如何使用React和Typescript制作HOC

我正在使用spotify API制作React+TS应用程序。 我有一个任务要做，在过去的两周里调查了一下，但仍然没有找到答案。。 问朋友，做了一些研究——还是什么都没有。尝试使用一些道具和包装MusicSearchView组件来解决此问题，但无法找出正确的类型。。 有人能帮我一些建议，可能的解决方案或至少是方向吗？ 这是我在这里的第一个帖子，如果我做得不对，请原谅我

待办事项： -创建一个可重用的AbstractSearchView（z，y，x，…） -通过将更改注入AbstractSearchView来创建具体视图（相册、艺术家等） -将抽象useFetch与具体的抓取器（fetchAlbums、FetchArtisters等）一起使用

函数应用程序（）{
返回(
音乐
{/*  */}
);
}
const searchAlbums=async（查询：字符串）=>{
试一试{
setResults（[]）；
setMessage（“”）；
设置加载（真）；
const response=等待axios.get（'https://api.spotify.com/v1/search', {
标头：{授权：'承载'+auth.token}，
参数：{q:query，键入：'album'}，
});
setResults（响应、数据、相册、项目）；
}
catch（error）{setMessage（error.message）；}
最后{setIsLoading（false）；}
};
返回{
搜索相册，
孤岛，
消息
结果
};
};
export const fetchArtists=async（查询：字符串）=>{
const response=等待axios.get（'https://api.spotify.com/v1/search', {
标头：{授权：'承载'+auth.token}，
参数：{q:query，键入：'artist'}，
});
返回（响应、数据、艺术家、项目）；
}
export const fetchAlbums=async（查询：字符串）=>{
const response=等待axios.get（'https://api.spotify.com/v1/search', {
标头：{授权：'承载'+auth.token}，
参数：{q:query，键入：'album'}，
});
返回（响应、数据、相册、项目）；
}
export const useFetch=函数（fetcher:（参数：P）=>Promise）{
const[results，setResults]=useState（null）；
const[isLoading，setIsLoading]=useState（false）；
const[message，setMessage]=useState（“”）；
const[params，setParams]=useState
（null）
useffect（（）=>{
if（params==null）返回；
获取（参数）
}，[params]）
const fetch=async（参数：P）=>{
试一试{
设置结果（空）；
setMessage（“”）；
设置加载（真）；
const result=等待获取程序（params）
设置结果（结果）
}
catch（error）{setMessage（error.message）；}
最后{setIsLoading（false）；}
};
以常量返回[{isLoading，message，results}，setParams]
};

function App() {
  return (
<div>
  <div className="container">
    <div className="row">
      <div className="col">

        <h1>MusicApp</h1>

        {/* <PlaylistsView /> */}
        <MusicSearchView/>
      </div>
    </div>
  </div>
</div>
  );
}



const searchAlbums = async (query: string) => {
    try {
        setResults([]);
        setMessage('');
        setIsLoading(true);

        const response = await axios.get<AlbumsSearchResponse>('https://api.spotify.com/v1/search', {
            headers: { Authorization: 'Bearer ' + auth.token },
            params: { q: query, type: 'album' },
        });

        setResults(response.data.albums.items);
    }
    catch (error) { setMessage(error.message); }
    finally { setIsLoading(false); }
};

return {
    searchAlbums,
    isLoading,
    message,
    results
};
};

export const fetchArtists = async (query: string) => {
    const response = await axios.get<ArtistsSearchResponse>('https://api.spotify.com/v1/search', {
        headers: { Authorization: 'Bearer ' + auth.token },
        params: { q: query, type: 'artist' },
    });

return (response.data.artists.items);
}

export const fetchAlbums = async (query: string) => {
    const response = await axios.get<AlbumsSearchResponse>('https://api.spotify.com/v1/search', {
        headers: { Authorization: 'Bearer ' + auth.token },
        params: { q: query, type: 'album' },
    });

return (response.data.albums.items);
}


export const useFetch = function <T, P>(fetcher: (params: P) => Promise<T>) {
    const [results, setResults] = useState<T | null>(null);
    const [isLoading, setIsLoading] = useState(false);
    const [message, setMessage] = useState('');
    const [params, setParams] = useState<P | null>(null)
useEffect(() => {
    if (params === null) return;
    fetch(params)
}, [params])

const fetch = async (params: P) => {
    try {
        setResults(null);
        setMessage('');
        setIsLoading(true);

        const result = await fetcher(params)
        setResults(result)

    }
    catch (error) { setMessage(error.message); }
    finally { setIsLoading(false); }
};

return [{ isLoading, message, results }, setParams] as const
};