Wystąpił błąd:

Przekroczono maksymalną głębokość aktualizacji. Może się tak zdarzyć, gdy składnik wielokrotnie wywołuje funkcję setState wewnątrz elementu componentWillUpdate lub componentDidUpdate. React ogranicza liczbę zagnieżdżonych aktualizacji, aby zapobiec nieskończonym pętlom.

Kod jest następujący:

  componentDidUpdate() {
    this._updateLocalStorage();

    if (this.state.searchValue !== "") {
      this.setState({
        filteredNotes: this.state.notes.filter(
          note =>
            note.text
              .toLowerCase()
              .indexOf(this.state.searchValue.toLowerCase()) !== -1
        )
      });
    } else {
      this.setState({
        filteredNotes: this.state.notes 
      });
    }
  }

Maximum Update Depth Exceeded Error

1
pratimagautam977 3 kwiecień 2020, 04:54

3 odpowiedzi

Najlepsza odpowiedź

Można to naprawić, umieszczając puste porównanie, jeśli oba stany są równe przed wywołaniem stanu głównego. Dokonałem również zmiany w innym stanie.

  componentDidUpdate(prevProps, prevState) {
    this._updateLocalStorage();

    if (this.state.searchValue !== "") {
      this.setState({
        filteredNotes: this.state.notes.filter(
          note =>
            note.text
              .toLowerCase()
              .indexOf(this.state.searchValue.toLowerCase()) !== -1
        )
      });
    } else if(prevState.filteredNotes === this.state.filteredNotes) {
      //do nothing
    } else if(this.state.searchValue === "") {
      this.setState({
        filteredNotes: this.state.notes 
      });
    }
  }

1
pratimagautam977 5 kwiecień 2020, 02:55

Metoda componentDidUpdate byłaby wywoływana za każdym razem, gdy nastąpiłaby zmiana stanu.

Być może będziesz musiał ostrożnie używać setState wewnątrz.


Ogranicz swój warunek dla tych setState. Może coś takiego jak poniżej:

Niektóre uwagi:

  • porównanie obiektów
  • wartość / adres odniesienia
componentDidUpdate(pervProps, prevState) {
  if (prevState.filteredNotes !== this.state.filteredNotes) {
    this._updateLocalStorage();
    if (this.state.searchValue !== "") {
      this.setState({
        filteredNotes: this.state.notes.filter(
          note =>
            note.text
              .toLowerCase()
              .indexOf(this.state.searchValue.toLowerCase()) !== -1
        )
      });
    } else {
      this.setState({
        filteredNotes: this.state.notes 
      });
    }
  }
}

1
keikai 3 kwiecień 2020, 01:59

Oto, co się dzieje:

  1. w CDM, gdy this.state.searchValue stanie się prawdą - aktualizuje stan
  2. aktualizacja stanu wyzwalacza i CDM
  3. krok 1. powtarza się
  4. krok 2. powtarza się
  5. niekończące się aktualizacje ...

Co powinieneś zrobić:

  1. zaktualizuj CDU do tego componentDidUpdate(prevProps, prevState)
  2. zaktualizuj swój warunek do:
if(this.state.searchValue !== "" && this.state.searchValue !== prevState.searchValue) {...}
1
Danko 3 kwiecień 2020, 02:02