React-native Sqlite、新しいデータで更新するリストビューを強制する

Question

sqliteファイル内に2つのテーブルがあり、ピッカーの選択に基づいてリストビューの内容を変更しようとしています。

クエリは正常に実行されていますが、リストビューにはまだ古いデータが表示されます。 どのようにしてリストビューを強制的に新しいデータでリサイクルすることができますか？

検索入力を使用すると新しいデータが表示されます。

constructor(props) { 
    super(props); 
    this.state = { 
     query: null, 
     selected1: 'table01', 
     progress: [], 
     dataSource: new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => { row1 !== row2; }, 
     }), 
     searchText: '', 
     filteredData: [], 

    }; 
    } 

    componentWillMount() { 
    this.callQuery(); 
    } 

    componentWillUnmount() { 
    this.closeDatabase(); 
    } 

    callQuery() { 
    if (this.state.selected1 === 'table01') { 
     this.setState({ query: 'select * from table01' }, this.openDB()); 
    } else if (this.state.selected1 === 'table02') { 
     this.setState({ query: 'select * from table02' }, this.openDB()); 
    } else { 
     console.log('Error creating query'); 
    } 
    } 
    openDB() { 
    const that = this; 
    db.transaction((tx) => { 
     tx.executeSql(this.state.query, [], (tx, results) => { 
     console.log('Query completed'); 
     that.setState(that.state); 
     const len = results.rows.length; 

     this.setState({ progress: [] }); 

     for (let i = 0; i < len; i++) { 
      const row = results.rows.item(i); 
      const obj = { 
      code: row.cod, 
      name: row.name, 
      }; 
      that.state.progress.push(obj); 
     } 
     that.setState(that.state); 
     }); 
    }); 
    } 




setSearchText = (event) => { 
    const searchText = event.nativeEvent.text; 
    const text = searchText.toLowerCase(); 
    const data = this.state.progress; 
    const filteredArray = data.filter((item) => { 
     if (item.name && item.code) { 
     const itemName = item.name.toLowerCase(); 
     const codeName = item.code.toLowerCase(); 
     return (itemName.search(text) !== -1 || codeName.search(text) !== -1); 
     } 
     return false; 
    }); 
    this.setState({ 
     filteredData: filteredArray, 
     searchText, 
    }); 
    }; 

    onValueChange(key: string, value: string) { 
    const newState = {}; 
    newState[key] = value; 
    this.setState(newState); 
    this.callQuery(); 
    } 

renderProgressEntry(entry) { 
    return (<View> 
      <Text style={styles.backTextWhite}>{entry.name}</Text> 
     </View>); 
    } 


render() { 
    const ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => { row1 !== row2; } }); 
    const data = this.state.searchText ? this.state.filteredData : this.state.progress; 
    return (
      <Picker 
        mode="dropdown" 
        selectedValue={this.state.selected1} 
        onValueChange={this.onValueChange.bind(this, 'selected1')} 
       > 
        <Item label="table01" value="table01" /> 
        <Item label="table02" value="table02" /> 
      </Picker> 
      <Input 
       onSubmitEditing={this.setSearchText.bind(this)} 
       autoCapitalize="none" 
       autoCorrect={false} 
       returnKeyType="go" 
      /> 
      <ListView 
       initialListSize={1} 
       pageSize={1} 
       removeClippedSubviews 
       enableEmptySections 
       dataSource={ds.cloneWithRows(data)} 
       renderRow={this.renderProgressEntry} 
       style={{ flex: 1 }} 
      /> 

Answer 1

問題は正しく設定されていなかったピッカー値であり、矢印関数呼び出しも追加されました。

onValueChange(key: string, value: string) { 
    this.setState({ 
     selected1: value, 
    },() => { this.callQuery(); }); 
    }