如何根据从第一次获得的值进行第二次 API 调用。使用 React 和 useEffect 钩子答案

【问题标题】：How to Make A second API call based on the value gotten from the first. with React and useEffect hooks如何根据从第一次获得的值进行第二次 API 调用。使用 React 和 useEffect 钩子
【发布时间】：2022-01-08 06:40:21
【问题描述】：

我试图调用第一个包含不同类别有效负载的 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();

    
    });
  }, []);

【问题讨论】：

在您的 api 响应中，您可以进行另一个 api 调用。

标签： javascript reactjs

【解决方案1】：

只使用 async await，不要对 then 使用 async await。

就像这样：

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)
})

【讨论】：

【解决方案2】：

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

当我的组件加载时，在我的第一个 useEffect 钩子的帮助下，我正在获取第一个目录。然后在 UI 中呈现这些结果。当用户单击任何目录时，我将其 id 设置为 state，并且在我的第二个 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>
  );
}

【讨论】：

【解决方案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
}, [])

【讨论】：