Buduję aplikację receptury iz jakiegoś powodu moje wywołania API są wysyłane 5 razy, ponieważ widzę dane 5 razy w console.log it. Jest to dla mnie problem, ponieważ API blokuje mi wysyłanie więcej niż 5 połączeń na minutę i nie będzie to zbyt przyjazne dla UX, jeśli produkt końcowy ma ten sam problem. Czy ktoś może zobaczyć, gdzie popełniam błąd w poniższym kodzie?

Identyfikator i klucz aplikacji zostały zmienione. proszę zauważyć, że jest to componentDidUpdate, ponieważ uruchamiam go, gdy stan się zmienia - w ten sposób wysyłam wywołanie pobierania

async componentDidUpdate() {
        let response = await axios.get(
            `https://api.edamam.com/search?q=${this.state
                .searchTerm}&app_id=c5e1&app_key=946ddb0f02a86bd47b89433&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 });
        console.log(data);
    }
1
Kisho 4 kwiecień 2020, 00:03

4 odpowiedzi

Najlepsza odpowiedź

Żądanie zależy od this.state.searchTerm. więc jeśli this.state.searchTerm zostanie zmieniony, twój komponent wyśle żądanie.

componentDidUpdate(prevProps, prevState) {
  if (prevState.searchTerm !== this.state.searchTerm) {
    axios.get(`https://api.edamam.com/search?q=${this.state.searchTerm}&app_id=c5e1&app_key=946ddb0f02a86bd47b89433&to=20`)
      .then((response) => {
        // process response
      })
      .catch(() => {
        // process error
      })
  }
}
1
Kirill Skomarovskiy 3 kwiecień 2020, 21:16

Jeśli chcesz wywołać api w oparciu o aktualizowaną część stanu, powinieneś użyć API Redux lub React context / hooks. Biblioteki te ułatwiają subskrybowanie niektórych zmian stanu i wykonanie odpowiedniej akcji. W idealnym przypadku nie powinieneś robić czegoś takiego jak pobieranie w swoim componentDidUpdate, ponieważ można to wywołać wiele razy na sekundę
Redux jest naprawdę szybki i sprawdzony w czasie, ale konfiguracja i utrzymanie otaczającej go struktury zajmuje trochę czasu. Więc w twoim przypadku przyjrzałbym się metodzie useEffect() hooków Reacta

0
Bibipkins 3 kwiecień 2020, 21:27

Problem w tym, że pobierasz dane metodą componentDidUpdate komponentu i używasz setState. Uruchamia ponowne renderowanie komponentu, a kod wewnątrz twojego componentDidUpdate jest wykonywany raz za razem po każdym setState. Użyj componentDidMount do jednorazowego pobierania danych

0
Maksym Bezruchko 3 kwiecień 2020, 21:06

Ponieważ oryginalne pytanie zostało zaktualizowane, moja odpowiedź nie ma już znaczenia (została już opublikowana poprawna odpowiedź). Więc go usuwam.

-2
Danko 3 kwiecień 2020, 21:21