React Native setState не обновляется - вызывается дважды в функции. Подождите, пока не закончите обновление

Question

Так что я использую React native и Realm. В основном я хочу показать индикатор перед запуском запроса Realm, а затем скрыть его, когда он будет завершен. Но индикатор, похоже, не появляется. Мое понимание React native по-прежнему новинка!

Вот то, что я до сих пор:

<SegmentedControlIOS 
    values={['Matched', 'Last Active', 'Distance', 'Age']} 
    momentary={false} 
    tintColor={'#DB4C2C'} 
    style={{ 
     width: width, 
     marginTop: 10 
    }} 
    selectedIndex={this.state.scIndex} 
    onValueChange={(value) => {}} 
    onChange={(event) => { 
     console.log("CHANGE") 
     var selectedIndex = event.nativeEvent.selectedSegmentIndex; 

     this.sortMatches(selectedIndex) 
     this.setState({ 
     scIndex: event.nativeEvent.selectedSegmentIndex 
     }) 
    }}/> 


    sortMatches(index) { 
    this.setState({loading: true}) 

    var sortMatches = null; 

    if (index == 0) { 
     sortedMatches = this._sort_matched() 
    } else if (index == 1) { 
     sortedMatches = this._sort_last_active() 
    } else if (index == 3) { 
     sortedMatches = this._sort_birthdate() 
    } 

    let dataSource = ds.cloneWithRows(sortedMatches) 
    this.setState({dataSource: dataSource, loading: false}) 
    } 

    <ActivityIndicator 
    animating={this.state.loading} 
    style={[styles.centering, {height: 30, paddingTop: 20}]} 
    size="small"/> 

Answer 1

Поведение SetState описано в React docs. Цитирование из документации:

SetState() не сразу мутировать this.state но создает состояние отложенного перехода. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

Нет гарантии синхронной работы вызовов setState , и звонки могут быть собраны для повышения производительности.

В вашем примере переход состояния ожидания через setState выполняется немного позже.

Answer 2

Вы можете установить индикатор активности в компонентеDidMount. Затем, после того как вы извлечете данные, остановите это. Почти подобно тому, как в документации ActivityIndicator

Answer 3

Все, что вам нужно сделать, это ПЕРВОЕ SetState loading: true, а затем вызвать this.sortMatches(selectedIndex) в onChange. setState принимает обратный вызов, например:

onChange={(event) => { 
    console.log("CHANGE") 
    var selectedIndex = event.nativeEvent.selectedSegmentIndex; 

    this.setState({ 
     loading: true, 
     scIndex: event.nativeEvent.selectedSegmentIndex 
    }, this.sortMatches(selectedIndex)) 
}