如何根据从第一个调用中获得的值进行第二个API调用.使用React和useEffect挂钩

Question

我试图对包含不同category的有效负载的第一个APi进行调用，然后使用它对另一个APi进行第二次调用，该APi包含来自第一个CATEGORE的每个不同类别项目。我是新手，不太知道如何让逻辑发挥作用。下面是我的想法。类别项目将根据选定的CATEGORIES进行显示。我对如何使用第一个调用的值进行第二个调用感到困惑。

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();
    
    });
  }, []);

Answer 1

只使用异步等待，不要将异步等待与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)
})

Answer 2

不完全确定你在做什么，但我会在下面解释我在做什么。

当我的组件加载时，在我的第一个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>
);
}

Answer 3

我认为您正在尝试基于以前提取的数据提取数据，并同时进行。这样做的一种方法可以是：

const fetchData = async () => {
try {
const getCategories = await fetchMarketingCategories()
setCatalog(getCategories)
// Now if fetch1 gives you array of catalogs with id you can just use 
// Array.map() to fetch catalog items. But this will ping a lot of request 
// to the api. But if this is the only way you need to do then go ahead.

let finalData = []
finalData = getCategories.map(async (items, idx)=> {
return await getAdvisorMarketingCatalog(items.id)
})
setCatalogItems(finalData)
} catch (err) {
// Do what you want with the error
}
}
useEffect(()=> {
let ignore = false

if (!ignore) {
fetchData()
}

return () => ignore = true
}, [])