我有這段代碼可以在控制臺上顯示資料，但是如何使用 react app .JSX 使用 .map 在頁面上同時顯示所有 3 個 api 的資料？
(async () => {
try {
const urls = [
"https://api.chucknorris.io/jokes/random",
"https://api.chucknorris.io/jokes/random",
"https://api.chucknorris.io/jokes/random",
"https://api.chucknorris.io/jokes/random",
];
const requests = urls.map((url) => fetch(url));
const responses = await Promise.all(requests);
const errors = responses.filter((response) => !response.ok);
if (errors.length > 0) {
throw errors.map((response) => Error(response.statusText));
}
const json = responses.map((response) => response.json());
const data = await Promise.all(json);
data.forEach((datum) => console.log(datum));
}
catch (errors) {
errors.forEach((error) => console.error(error));
}
})();
uj5u.com熱心網友回復：
您可以使用Promise.All 方法并將決議的資料保存到狀態并相應地映射以呈現資料...
示例如下
const { useState, useEffect } = React;
const urls = [
"https://api.chucknorris.io/jokes/random",
"https://api.chucknorris.io/jokes/random",
"https://api.chucknorris.io/jokes/random",
"https://api.chucknorris.io/jokes/random",
];
const App = () => {
const [data, setData] = useState();
useEffect(() => {
const promises = urls.map((url) =>
fetch(url)
.then((res) => res.json())
.then((data) => data)
);
Promise.all(promises).then((values) => {
setData(values);
});
}, []);
if (!data) return "Loading ..."; // this is not exact way to do a loading state just for illustration ...
return (
<div>
{data.map((item) => (
<p key={item.id}>{item.value}</p>
))}
</div>
);
};
ReactDOM.createRoot(document.getElementById("root")).render(<App />);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/525452.html
下一篇：異步任務使應用程式崩潰