Próbuję uruchomić kod powyżej, ale stan jest zaktualizowany tylko dla IDX. Z tego, co rozumiem, setstate drugiej funkcji nie otrzyma zaktualizowanego stanu i dlatego tak się dzieje. Czy istnieje sposób, aby działało prawidłowo (oczekiwać niż łączenie 2 funkcji w jednym)

doIt(idx,array) {
   this.doFirst(array);
   this.doSecond(idx);
}

doFirst(array){
   //bla bla bla code
   this.setState(test: {...this.state.test, array});
}

doSecond(idx) {
    // bla bla bla code
    this.setState(test: {...this.state.test, idx});
}
2
user4697086 1 czerwiec 2018, 20:35

4 odpowiedzi

Poniżej dwóch stwierdzeń wykonanych jednocześnie.

this.doFirst(array);
this.doSecond(idx);

Te nazywają setState. setState is asynchronous. Nie ma więc gwarancji, że wartość będzie aktualizowane sekwencyjnie. Beacusa tego połączenia wyścigowego, wartość jest nadpisana. Lepiej łańcuchy te połączenie.

doIt(idx,array) {
   this.doFirst(array);   
}

doFirst(array){
   //bla bla bla code
   this.setState({test: {...this.state.test, array}},()=>{

    this.doSecond(idx); 
   });
}

doSecond(idx) { 
    this.setState({test: {...this.state.test, idx}});
}
1
RIYAJ KHAN 1 czerwiec 2018, 17:49

Trudno powiedzieć dokładnie, ponieważ Twoje przykładowe połączenia Setstate nie są w porządku, this.setState(test: {...this.state.test, idx});. Czy masz na myśli, że robisz this.setState({test: {...this.state.test, idx}});? Jeśli tak, powinieneś użyć połączenia zwrotnego zamiast tego obiektu:

this.setState(() => ({ test: {...this.state.test, idx}})

0
Aaron Bruce 1 czerwiec 2018, 17:38

Zakładam, że po prostu źle zgubiłeś swoje wsporniki wokół swojego obiektu państwowego, więc dodałem te.

W każdym razie chcesz użyć funkcji Updater:

this.setState((prevState, props) => ({test: {...prevState.test, array}});

Należy pamiętać, że prawdopodobnie nie jest to, co chcesz, jak w ES 2015 przekłada się: this.setState((prevState, props) => ({test: {...prevState.test, array: array}});

Chcesz zrobić to samo dla drugiej funkcji. Reaguj partie ustawione w połączeniach państwowych razem, więc jeśli nie korzystasz z aktualizacji, istnieje szansa, że uzyskasz dostęp do stanu stale dla kolejnych połączeń funkcyjnych. Prawdopodobnie to dzieje się w tym przypadku.

0
sledsworth 1 czerwiec 2018, 17:53

Gdy inni już wskazali, setState jest asynchroniczne. Jeśli chcesz użyć poprzedniego stanu, chciałbym podkreślić, że pierwszy argument Setstate to updater, może wykonać funkcję do obliczenia następnego stanu z poprzedniego stanu:

doFirst(array){
   this.setState(previousState => ({ test: {...previousState.test, array} }));
}

doSecond(idx) {
    this.setState(previousState => ({ test: {...previousState.test, idx} }));
}
0
Sulthan 1 czerwiec 2018, 17:55