(REACT) 优化 API 调用链导致组件不渲染

如何解决(REACT) 优化 API 调用链导致组件不渲染

这是我第一次在这里发帖，如有不妥之处，请提前道歉。

所以我正在构建一个网络应用程序，它需要一系列 API 调用来填充用户所做的搜索查询。然而，从最初的 API 调用（与传递给网站的搜索词相对应的数据）接收到的数据对于应用程序而言是不完整的。因此，我将所有 id 整理到一个数组中，然后循环遍历第二个 API 调用以获取完整数据。以下都是我的App.js

// tags are the search terms the user inputs 
const [tags,setTags] = useState([])
// searchResults is the complete data retrieved from the API call
const [searchResults,setSearchResults] = useState([]);
//for loading screen 
const [isLoading,setLoading] = useState(true);

 useEffect(() => {

        // apiSearchCall contains the incomplete data 

        apiSearchCall(tags).then((data) => {
            if (data.drinks === "None Found") {
                setNoDrinks(true);
            } else {
                let idArr = aggregateID(data);
                let drinks = [];
                idArr.forEach((element) => {
                    // apiIndividualCall contains the complete data
                    apiIndividualCall(element).then((dataFinal) => {
                        drinks.push(dataFinal.drinks[0]);
                        setSearchResults({ drinks });
                    });
                });
                setLoading(false);
            }
        });
    },[setSearchResults,setLoading,tags]);

searchResults 然后被发送到另一个组件 Card.js

虽然这确实为我提供了我需要的功能 (Here is a video demonstrating it)，但它带来了巨大的性能损失，因为搜索结果在 forEach 循环的每次迭代中都被重置，我认为每个组件都被重新渲染。为了优化这一点，我分别尝试了以下

• 将饮料的预分配解除到.then()之外，并在setSearchResults之外调用setLoading和.then()

• 删除了 setLoading 和 setSearchResults 并添加了另一个链接的 .then()

• 移除了 forEach 循环并将其添加到一个单独的辅助函数中，该函数返回饮料的内容并将其传递给 setSearchResults

所有这些尝试都导致了the components not rendering。在对我的很多代码进行 console.log-ing 之后，我发现正确的信息被传递给了卡片组件，并且所有的逻辑都在运行 - 直到我们点击 return 语句，从那里开始没有运行任何东西.

我的直觉是，我可能遗漏了一些关于 useEffect() 工作原理的基本知识，但我不确定它可能是什么

如果它有帮助，我正在使用这个 API

https://www.thecocktaildb.com/api.php

其中成分搜索结果（我的代码中的apiSearchCall()）具有以下结构

{
"drinks": [
    {
      "strDrink": "Chocolate Beverage","strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/jbqrhv1487603186.jpg","idDrink": "12732"
    }
  ]
}