Question

因此，我正在制作一个食谱应用程序，其中大部分已完成。我现在正在寻求集成高级搜索功能，以便用户可以在点击搜索按钮之前过滤出他们想要看到的内容。所以现在，与该问题相关的状态部分看起来像这样

advancedSearchParameters: [

            ]

在输入术语（斯里兰卡语）并单击搜索组件中的搜索按钮时，该状态下的advancedSearchParameters将更新为类似这样的内容

{
                        balanced: false,
                        highProtein: false,
                        highFibre: false,
                        lowFat: false,
                        lowCarb: false,
                        lowSodium: false,
                        vegan: false,
                        vegetarian: false,
                        dairyFree: false,
                        glutenFree: false,
                        lowSugar: false,
                        peanutFree: false,
                        resultNum: 20,
                        searchTerm: ''
                    }

这将提示组件使用

更新

async componentDidUpdate(prevProps, prevState) {
            if (
                prevState.advancedSearchParameters !== this.advancedSearchParameters &&
                this.state.advancedSearchParameters.searchTerm !== ''
            ) {
                let response = await axios.get(
                    `https://api.edamam.com/search?q=${this.state.advancedSearchParameters
                        .searchTerm}&app_id=cf7e1&app_key=946d6fb34df02a86bd47b89433&to=20`
                );
                let data = response.data.hits.map((data) => ({
                    name: data.recipe.label,
                    src: data.recipe.image,
                    source: data.recipe.source,
                    url: data.recipe.url,
                    healthLabels: data.recipe.healthLabels,
                    dietLabels: data.recipe.dietLabels,
                    calories: data.recipe.calories,
                    totalWeight: data.recipe.totalWeight,
                    totalTime: data.recipe.totalTime,
                    totalNutrients: data.recipe.totalNutrients,
                    ingredients: data.recipe.ingredients
                }));
                this.setState({ recipeResults: data });
            }
        }

执行此操作时出现的问题是API调用似乎多次发送，提示API至少阻止我的请求一分钟。谁能看到我在这方面出了什么问题？

Answer 1

通常会调用

componentDidUpdate来处理道具更改，但是您没有这样做。您可以使用componentDidUpdate处理状态更改，然后在其中更新状态以重新触发它。您应该将该代码移到componenDidUpdate之外，然后将其放置在更新advancedSearchParameters状态的位置，可能在input.onChange回调中。

还有一件事，当您进行实时搜索时，您在每次击键时都会调用api。有两种方法可以解决该问题。

使用axios取消令牌，因此您可以在发送新请求之前取消现有的axios请求
删除您的axios呼叫，这是一个javascript函数，它将在用户键入键后发送请求之前等待一小段时间

Answer 2

解决了！我需要做的就是

prevState.advancedSearchParameters！== this.advancedSearchParameters

到prevState.advancedSearchParameters！== this.state.advancedSearchParameters

使用componentDidUpdate更新对象中的状态时遇到麻烦

2 个答案: