Kiedy stosować React callState callback

Gdy zmienia się stan składnika reagującego, wywoływana jest metoda renderowania. Dlatego w przypadku każdej zmiany stanu można wykonać akcję w ciele metod renderowania. Czy istnieje zatem szczególny przypadek użycia dla wywołania zwrotnego setState?

Tak, ponieważ setStatedziała w pewien asynchronoussposób. Oznacza to, że po wywołaniu setStatedo this.statezmiennej nie jest natychmiast zmienić. więc jeśli chcesz wykonać akcję natychmiast po ustawieniu stanu na zmienną stanu, a następnie zwrócić wynik, przydatne będzie wywołanie zwrotne

Rozważ poniższy przykład

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Powyższy kod może nie działać zgodnie z oczekiwaniami, ponieważ titlezmienna mogła nie zostać zmutowana przed wykonaniem na niej sprawdzania poprawności. Teraz możesz się zastanawiać, czy możemy przeprowadzić walidację w render()samej funkcji, ale byłby lepszy i czystszy sposób, gdybyśmy mogli sobie z tym poradzić w samej funkcji changeTitle, ponieważ dzięki temu twój kod byłby bardziej zorganizowany i zrozumiały.

W takim przypadku przydatne jest oddzwonienie

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Innym przykładem będzie sytuacja, gdy chcesz dispatchi działanie, gdy stan się zmieni. będziesz chciał to zrobić w trybie oddzwaniania, a nie w taki render()sposób, w jaki będzie on wywoływany za każdym razem, gdy nastąpi ponowne wyrenderowanie, a zatem istnieje wiele takich scenariuszy, w których będziesz potrzebował oddzwonienia.

Innym przypadkiem jest API Call

Może się zdarzyć, że konieczne będzie wywołanie interfejsu API na podstawie konkretnej zmiany stanu, jeśli zrobisz to w metodzie renderowania, będzie ona wywoływana przy każdej onStatezmianie renderowania lub dlatego, że niektóre Prop przeszły na Child Componentzmienioną.

W takim przypadku należy użyć a, setState callbackaby przekazać zaktualizowaną wartość stanu do wywołania API

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....

this.setState({
    name:'value' 
},() => {
    console.log(this.state.name);
});

1. przypadek użycia, który przychodzi mi na myśl, to apiwywołanie, które nie powinno przejść do renderowania, ponieważ będzie działać w celu eachzmiany stanu. Wywołanie interfejsu API powinno być wykonywane tylko przy specjalnej zmianie stanu, a nie przy każdym renderowaniu.

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
} 

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

Dlatego w przypadku każdej zmiany stanu można wykonać akcję w ciele metod renderowania.

Bardzo zła praktyka , ponieważ render-metoda powinna być czysta, oznacza to, że nie należy wykonywać żadnych akcji, zmian stanu, wywołań interfejsu API, po prostu skomponuj swój widok i zwróć go. Działania należy wykonywać tylko w przypadku niektórych zdarzeń. Renderowanie nie jest zdarzeniem, ale componentDidMountna przykład.

Rozważ połączenie setState

this.setState({ counter: this.state.counter + 1 })

POMYSŁ

setState może być wywoływany w funkcji asynchronicznej

Więc nie możesz polegać this. Jeśli powyższe wywołanie zostało wykonane wewnątrz funkcji asynchronicznej this, odniesie się do stanu komponentu w tym momencie czasu, ale spodziewaliśmy się, że odniesie się to do właściwości wewnątrz stanu w czasie wywołania setState lub rozpoczęcia zadania asynchronicznego. Ponieważ zadaniem było wywołanie asynchroniczne, właściwość mogła się z czasem zmienić. Dlatego nie można wiarygodnie użyć thissłowa kluczowego w odniesieniu do niektórych właściwości stanu, dlatego używamy funkcji zwrotnej, której argumentami są previousState i rekwizyty, co oznacza, kiedy zadanie asynchroniczne zostało wykonane i nadszedł czas na aktualizację stanu za pomocą wywołania setState prevState będzie odnosić się do stanu teraz, gdy setState jeszcze się nie zaczął Zapewnienie niezawodności, że nextState nie zostanie uszkodzony.

Błędny kod: prowadziłby do uszkodzenia danych

this.setState(
   {counter:this.state.counter+1}
 );

Poprawny kod z setState z funkcją oddzwaniania:

 this.setState(
       (prevState,props)=>{
           return {counter:prevState.counter+1};
        }
    );

Dlatego za każdym razem, gdy potrzebujemy zaktualizować nasz obecny stan do następnego stanu na podstawie wartości posiadanej przez właściwość właśnie teraz, a wszystko to dzieje się w sposób asynchroniczny, dobrym pomysłem jest użycie setState jako funkcji wywołania zwrotnego.

Próbowałem to wyjaśnić tutaj codepen CODE PEN