我希望有人可以幫助我完成我正在嘗試做的事情。
所以我正在獲取一個回傳資料集的 API 端點，這很好，但是我喜歡做的是使用所有 campaignid 引數值并逐個進行 api 呼叫以檢索每個 campaignid 值的結果，這樣它就會使用 campaignid 中的每個 id 并進行 api 呼叫，顯然另一個呼叫的終點會有所不同。只是想知道我該如何動態地做到這一點
import { useState, useEffect } from "react";
const url = "https://6271dd6bc455a64564b8b6b6.mockapi.io/AP1/REST/Numberofsubmissons";
export default function App() {
const [data, setData] = useState([]);
console.log(data);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => setData(data))
}, []);
return (
<>
<code>{JSON.stringify(data)}</code>
</>
);
}
uj5u.com熱心網友回復：
第一個 API 請求回傳包含campaignid值的資料陣列。您可以將這個獲取data的陣列映射到一個fetchPromises 陣列，通過 id 獲取活動資料。決議后的陣列將包含所有獲取的資料，您也可以將這些資料保存到本地狀態中。
const baseUrl = "https://6271dd6bc455a64564b8b6b6.mockapi.io/AP1/REST/";
export default function App() {
const [data, setData] = useState([]);
const [campaignData, setCampaignData] = useState([]);
useEffect(() => {
const fetchAllData = async () => {
try {
const response = await fetch(baseUrl "Numberofsubmissons");
const data = await response.json();
setData(data); // save data to state
const campaignDataReqs = data.map(async ({ campaignid }) => {
const response = await fetch(baseUrl `campaigndetails/${campaignid}`);
const campaignData = await response.json();
return campaignData;
});
const campaignData = await Promise.all(campaignDataReqs);
setCampaignData(campaignData); // save campaign data to state
} catch(error) {
// catch and handle any rejected Promises or thrown errors
}
};
fetchAllData();
}, []);
return (
....
);
}
uj5u.com熱心網友回復：
您可以添加一個額外useEffect的偵聽data更改，然后根據使用它對不同的APIcampaignid進行多次呼叫。campaignid
useEffect(() => {
if (Array.isArray(data)) {
Promise.all(
data.map(async ({ campaignid }) => {
const response = await fetch(`${url}/${campaignid}`);
return await response.json();
}),
).then((res) => { setNewData(res) });
}
}, [data]);
制作了一些可玩的代碼，使用了一些虛假的承諾 - 回應可以存盤為具有{ [campaignid]: data }結構的物件或類似的東西，具體取決于您的需要。
代碼沙盒： https ://codesandbox.io/s/react-fetch-onclick-forked-o1q36b ?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/534987.html