反应原生从 SQLite 动态更改 ListView答案

【问题标题】：react native dynamically change ListView from SQLite反应原生从 SQLite 动态更改 ListView
【发布时间】：2017-03-11 20:05:33
【问题描述】：

我想在获取结果表单数据库后重新呈现列表视图。我尝试了谷歌几乎所有可能的方法，但它不起作用。数据库中的记录正在正确获取，但列表视图未更新。请在下面找到我的代码。我想从数据库中实时搜索数据并在 ListView 中显示它们

import React, { Component } from 'react';
import { StatusBar, ListView, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { Container, Header, Title, Content, H3,Item,Input, ListItem, Button, Icon, Footer, FooterTab, Left, Right, Body } from 'native-base';

import { openDrawer } from '../../actions/drawer';
import styles from './styles';

class Dictionary extends Component {

  static propTypes = {
    openDrawer: React.PropTypes.func,
  }
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
    this.state = {
        dataSource: ds.cloneWithRows([]),
        isLoading: false,
    }
  }
  searchMatchingWords(keyWord) {
    if(keyWord.length > 0) {
      var temp = [];
      db.executeSql("SELECT `English` FROM `dictionary`  WHERE `English` LIKE '"+keyWord+"%' ORDER BY  `English` ASC LIMIT 0, 30", [], function(results) {
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
              temp.push(results.rows.item(i));
            }
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(temp),
            });
      });
    }
  }

  render() {
    return (
      <Container style={styles.container}>

        <Header>
          <Left>
            <Button transparent onPress={this.props.openDrawer}>
              <Icon name="ios-menu" />
            </Button>
          </Left>
          <Body>
            <Title>Search Words</Title>
          </Body>
          <Right />
        </Header>
        <Header searchBar rounded>
          <Item>
            <Icon active name="search" />
            <Input placeholder="Search" onChangeText={(text) => this.searchMatchingWords(text)}/>
            <Icon active name="bookmark" />
          </Item>
          <Button transparent>
            <Text>Search</Text>
          </Button>
        </Header>

        <Content>
            <View style={{flex: 1, paddingTop: 22}}>
              <ListView
                enableEmptySections={true}
                dataSource={this.state.dataSource}
                renderRow={(rowData) =>
                  <ListItem>
                    <Text>{rowData.English}</Text>
                    <Right><Icon name="arrow-forward" /></Right>
                  </ListItem>
                }/>
            </View>
        </Content>

      </Container>
    );
  }
}

function bindAction(dispatch) {
  return {
    openDrawer: () => dispatch(openDrawer()),
  };
}

const mapStateToProps = state => ({
  navigation: state.cardNavigation,
  themeState: state.drawer.themeState,
});

export default connect(mapStateToProps, bindAction)(Dictionary);

【问题讨论】：

在 var temp = [] 之后添加这个； temp = this.state.ds.slice();，检查一下，告诉我
它不工作@NiteshMishra

标签： listview react-native

【解决方案1】：

我解决了我的问题。 react native setState 没有问题。问题出在

这个

操作员。

if(keyWord.length > 0) {
      var temp = [];
      var self = this;
      db.executeSql("SELECT `English` FROM `dictionary`  WHERE `English` LIKE '"+keyWord+"%' ORDER BY  `English` ASC LIMIT 0, 30", [], function(results) {
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
              temp.push(results.rows.item(i));
            }
            self.setState({
                dataSource: self.state.dataSource.cloneWithRows(temp),
            });
      });
    }

【讨论】：