在本教程中，我们将使用 react 创建一个 lyrics finder web 应用程序。该项目非常适合那些想要练习集成 api、管理状态和显示动态内容的人。
歌词查找器允许用户通过输入歌曲标题和艺术家姓名来搜索歌词。它从公共 api 获取歌词并将其显示在屏幕上。用户可以快速找到并阅读自己喜欢的歌曲的歌词。
项目组织如下：
├── public ├── src │ ├── components │ │ ├── lyricsfinder.jsx │ │ ├── searchform.jsx │ ├── app.jsx │ ├── app.css │ ├── index.js │ └── index.css ├── package.json └── readme.md
import { usestate } from "react";
import searchform from "./searchform";
const lyricsfinder = () => {
const [lyrics, setlyrics] = usestate("");
const [loading, setloading] = usestate(false);
const [error, seterror] = usestate("");
const fetchlyrics = async (song, artist) => {
setloading(true);
seterror("");
try {
const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
if (!response.ok) {
throw new error("lyrics not found");
}
const data = await response.json();
setlyrics(data.lyrics);
} catch (err) {
seterror(err.message);
} finally {
setloading(false);
}
};
return (
<div classname="lyrics-finder">
<searchform onsearch="{fetchlyrics}"></searchform>
{loading && <p>loading...</p>}
{error && <p classname="error">{error}</p>}
{lyrics && <pre classname="lyrics">{lyrics}
}