我試圖呼叫包含不同類別有效負載的第一個 APi，然后使用它對另一個 API 進行第二次呼叫，該 API 包含來自第一個類別的每個類別的不同類別項。我是新手，不太了解如何使邏輯起作用。這是我下面的想法。類別專案根據選擇的類別顯示。我對如何使用第一個值進行第二次呼叫感到困惑。
const [catalog,setCatalog] = useState([]);
const [catalogItems,setCatalogItems]= useState([]);
useEffect(() => {
const fetchData = async () => {
await fetchMarketingCategories()
.then((result)=>{
setCatalog(result);
console.log("result",result);
})
.then(async (categoryId)=>{
const {items = []} = await getAdvisorMarketingCatalog(categoryId)
setCatalogItems(items);
})
};
fetchData();
});
}, []);
uj5u.com熱心網友回復：
只需使用異步等待，不要將異步等待與“then”一起使用。
像這樣。
useEffect(async () => {
const result = await fetchMarketingCategories()
setCatalog(result)
console.log('result', result)
// not sure how you want to get the id from result
const categoryId = getCategoryIdFromResult(result)
const { items = [] } = await getAdvisorMarketingCatalog(categoryId)
setCatalogItems(items)
})
uj5u.com熱心網友回復：
不完全確定你是什么，但我會在下面解釋我在做什么。
當我的組件加載時，在我的第一個useEffect鉤子的幫助下，我正在獲取第一個目錄。然后在 UI 中呈現這些結果。當用戶單擊任何目錄時，將其 id 設定為狀態，并在我的第二個幫助useEffect下從 api 獲取下一個結果
這是我的代碼
function App() {
const [catalog, setCatalog] = useState([]);
const [catalogItems, setCatalogItems] = useState([]);
const [selectedCatalog, setSelectedCatalog] = useState();
useEffect(() => {
const fetchData = async () => {
const result = await fetchMarketingCategories();
setCatalog(result);
console.log("result", result);
};
fetchData();
}, []);
useEffect(() => {
const fetchDetails = async () => {
const { items = [] } = await getAdvisorMarketingCatalog(selectedCatalog);
setCatalogItems(items);
};
if (selectedCatalog) {
fetchDetails();
}
}, [selectedCatalog]);
return (
<div>
{catalog?.map((c) => (
<div onClick={() => setSelectedCatalog(c.id)}>{c.name}</div>
))}
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/405718.html
標籤：