React-native Sqlite，强制列表视图更新新数据

Posted 2023-02-26

【中文标题】React-native Sqlite，强制列表视图更新新数据

【英文标题】：React-native Sqlite, force listview to update with new data

【发布时间】：2017-03-03 11:15:26

【问题描述】：

我在一个 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 
            />

【问题讨论】：

我遇到过这些解决方案，但不确定它们是否适合我的场景。 ***.com/questions/31738671/…***.com/questions/33436902/…***.com/questions/33426760/…

【参考方案1】：

问题是选择器值设置不正确，还添加了箭头函数调用。

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