请你写一段 HTML 代码,在代码中有一段 JSX 代码,这段代码使用了 React 和 React-Query, 能够发送异步请求访问一个 {API}。API 是 https://api.exchangerate.host/latest. 并要求将 {API} 返回的数据以列表的形式展示在 HTML 页面上。
时间: 2023-03-13 21:16:33 浏览: 57
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-query@2/dist/react-query.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const App = () => {
const { isLoading, error, data } = useQuery('currencyRate', () =>
fetch('https://api.exchangerate.host/latest').then((res) => res.json())
);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<ul>
{data.rates &&
Object.entries(data.rates).map(([currency, rate]) => (
<li key={currency}>
{currency}: {rate}
</li>
))}
</ul>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>