Javascript 使用componentDidUpdate更新对象中的状态时出现问题

因此，我正在制作一个食谱应用程序，并完成了大部分工作。我现在希望集成一个高级搜索功能，这样用户可以在点击搜索按钮之前过滤他们想要看到的内容。所以现在，与这个问题相关的部分是这样的

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阻止我的请求至少一分钟。有人能看出我在这方面出了什么问题吗

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

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

使用axios取消令牌，以便在发送新的axios请求之前可以取消现有的axios请求

解除axios调用的抖动，这是一个javascript函数，在用户键入密钥后，会在发送请求之前等待一小段延迟

---

解决了！我所需要做的就是

prevState.advancedSearchParameters！==这是advancedSearchParameters

---

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

不使用componentDidUpdate获取异步请求，为什么不使用click处理程序，我的意思是你传递给搜索按钮的onClick prop的函数？因为这是对外部API和我的知识API的调用，更改我的状态并呈现新组件的API调用应该在componentDidUpdate@rzwnahmdSorry mate中调用，我不明白，当状态更改时会触发componentDidUpdate。当触发componentDidUpdate时，将发出API调用。此外，搜索也不是实时的，因为点击@hermitcrab会触发状态变化。我还以为你在像谷歌一样进行实时搜索。在您的onClick处理程序中，调用API，您会很好。在componentDidUpdate内部调用setState时必须非常小心，因为您可能会进入无限循环。如果从onClick调用API，则不会出现此问题