使用 componentDidUpdate 在 object 中更新 state 时遇到问题

Question

So I am in the midst of making a recipe app and have most of it done. I am now looking to integrate an advanced search function so that users can filter what they want to see before hitting the search button. So right now, the part of the state that is relevant to this question looks like this

advancedSearchParameters: [

            ]

On the entry of a term (sri Lankan) and click of the search button in the search component, advancedSearchParameters in the state will update to have something like this

{
                        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: ''
                    }

This will prompt the component to update with

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

The issue that occurs when i do this is that the API call appears to be sent multiple times, prompting the API to block my request for at least a minute. Can anyone see where I am going wrong with this?

Answer 1

componentDidUpdate is usually called to handle a change in props, but you're not doing that. You use componentDidUpdate to handle the change of state and then you update the state inside which will retrigger it. You should move that code outside of componenDidUpdate and put it where you update your advancedSearchParameters state, probably in an input.onChange callback.

One more thing, when you do a real time search, you are calling your api at every keystroke. There are 2 ways to deal with that problem.

1. Use axios cancel token, so you can cancel an existing axios request before sending a new one

2. Debounce your axios call, it's a javascript function that will wait for a short delay after the user has typed a key before sending the request

Answer 2

Solved it! All i needed to do was make

prevState.advancedSearchParameters.== this.advancedSearchParameters

to prevState.advancedSearchParameters.== this.state.advancedSearchParameters