ReactネイティブsetStateは更新されません - 関数内で2回呼び出されます。更新が完了するまで待ちます。

Question

したがって、React nativeとRealmを使用しています。基本的には、レルムクエリが開始される前にインジケータを表示し、終了したらインジケータを非表示にします。しかし、指標が現れていないようです。 Reactネイティブの私の理解はまだ新しいです！ここで

は、私がこれまで持っているものです。

<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

componentDidMountにアクティビティインジケータを設定できます。その後、データを取得した後に停止します。ドキュメントActivityIndicator

Answer 3

あなたがする必要があるのとほぼ同様のFIRST SETSTATE loading: trueされ、その後onChangeでthis.sortMatches(selectedIndex)を呼び出します。 setStateは次のようにコールバックを受け取ります。

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

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