Jak mogę sprawdzić, czy stan reactjs został zaktualizowany, a następnie wywołać funkcję?

Question

Próbuję użyć funkcji reactjs do zaktualizowania stanu, a gdy zostanie zaktualizowany, wywołaj połączenie ajaxowe żądające nowej strony. Tuż przed wywołaniem wywołania ajax ustawiana jest zmienna przesunięcia: var offset = this.state.npp * this.state.page; Jednak znajduję się po uruchomieniu clickNextPage(), wartość this.state.page nie jest aktualizowana.

Zasadniczo nie rozumiem, co się tutaj dzieje, wydaje się to stanem wyścigowym, ponieważ obserwuję zmianę stanu w mojej funkcji render() za pomocą {this.state.page}.

Jak mogę sprawdzić, czy moja strona this.state.page jest zaktualizowana, a następnie uruchomić findByName()?

clickNextPage: function(event){ 
    console.log("clicked happend") 
    page = this.state.page; 
    console.log(page) 
    page += 1 
    console.log(page) 
    this.setState({page: page}); 
    console.log(this.state.page) 
    this.findByName() 
    }, 

JS konsoli:

clicked happend 
0 
1 
0 

Answer 1

setState jest asynchroniczna w this.state że nie będzie aktualizowana od razu. Krótką odpowiedzią na dylemat jest użycie wywołania zwrotnego (drugi parametr do setState), który jest wywoływany po zaktualizowaniu stanu wewnętrznego. Na przykład

this.setState({page: page}, function stateUpdateComplete() { 
    console.log(this.state.page) 
    this.findByName(); 
}.bind(this)); 

Dłuższa odpowiedź jest taka, że ​​po wywołaniu setState trzy funkcje są wywoływane (patrz tutaj po więcej szczegółów na temat każdej https://facebook.github.io/react/docs/component-specs.html):

• shouldComponentUpdate Pozwala to sprawdzić poprzedni i nowy stan, aby określić, czy komponent powinien sam się zaktualizować. Jeśli zwróci false, następujące funkcje są nie wykonane (chociaż this.state nadal będzie aktualizowany w terminie komponentu)
• componentWillUpdate to daje szansę na uruchomienie dowolnego kodu, zanim nowy stan jest ustawiony wewnętrznie i renderowania dzieje
• render dzieje się to między funkcjami "woli" i "zrobione".
• componentDidUpdate to daje szansę na uruchomienie dowolnego kodu po nowy stan jest ustawiony i składnik został ponownie wydanego sobie

Answer 2

Dzwoniąc this.setState nowe państwo nie jest ustawiony bezpośrednio, React stawia go w stanie oczekiwania, które wywołując this.state może wrócić stary stan.

Dzieje się tak dlatego, że React może grupować aktualizacje stanu i dlatego nie gwarantuje, że this.setState jest synchroniczny.

Co chcesz zrobić nazywa this.findByName() ciągu componentDidUpdate, componentWillUpdate lub za pośrednictwem zwrotnego oferowany jako drugi argument do this.setState zależności od przypadku użycia. Zwróć uwagę, że wywołanie zwrotne do this.setState nie zostanie uruchomione, dopóki połączenie nie zostanie zakończone, a składnik ponownie się wyrenderuje.

Ponadto w twoim przypadku możesz przekazać funkcję do this.setState zamiast wykonywania tańca zmiennego w celu zwiększenia czytelności.

this.setState(function (prevState, currentProps) { 
    return {page: prevState.page + 1} 
}, this.findByName);