Question

我正在从SQLite数据库中获取数据，并在突出显示选项卡时显示数据。问题是，每当我移到另一个选项卡时，显示数据的Scrollview就会被复制。如何防止这种情况发生？

componentDidMount() {
    this._subscribe = this.props.navigation.addListener('didFocus', () => {
      this.retrieveSavedCards();
    });

  }

这就是我检索数据的方式

  retrieveSavedCards(){
    db.transaction(
      tx => {
       tx.executeSql('select * from MyScannedCards', [], (trans, result) => {
        var len = result.rows.length;
        for (i=0;i<len;i++){
          cardDetails = result.rows._array[i];
          this.setState({ cardholders: this.state.cardholders.concat(cardDetails) })
        }
        });
      }
    );

}

这是我的滚动视图，以及应该如何显示数据：

<ScrollView>
  {
    this.state.cardholders.map((l, i) => (
      <ListItem
        key={i}
        leftAvatar={{ source: { uri: this.state.baseUrl+l.avatar } }}
        title={l.cardholderfirstname + " " + l.cardholderlastname}
        subtitle="Your company"
        onPress={() => {
          this.toggleModal();
        }}
      />

    ))
  }
   </ScrollView>

这是我的状态：

this.state = {
  cardholders: [

  ],
  baseUrl: "http://myurl.com"     
};

Answer 1

您将必须卸载didFocus事件监听器。如此处所述：https://reactnavigation.org/docs/en/status-bar.html#tabnavigator

componentWillUnmount() {
this._subscribe.remove();
}

Answer 2

有点骇人听闻，但是我不知道如何阻止滚动视图重复，所以我让滚动视图停止显示已经处于状态的对象。

在我的for循环中：

    for (i=0;i<len;i++){
      cardDetails = result.rows._array[i];
      console.log(cardDetails.id)
      this.addUser(cardDetails);
    }

还有其他功能，用于检查重复项并在发现新内容时更新状态。

 userExists(cardDetails) {
    return this.state.cardholders.some(function(el) {
      return el.id === cardDetails.id;
    }); 
  }

  addUser(cardDetails) {
    if (this.userExists(cardDetails)) {
      console.log("Skipping")
      return false; 
    }
    this.setState({ cardholders: this.state.cardholders.concat(cardDetails) })
    console.log("Adding")
    return true;
  }

标签焦点对准时，Scrollview被复制

2 个答案: