ListView 在数据源更新时删除错误的行

IT技术 reactjs react-native
2021-03-29 14:46:26

我有一个 React Native ListView,当我用新的部分和行更新状态时,它似乎删除了 UI 中的错误行 - 我删除的行保持不变,但下面的一个,有时甚至 2 个被删除,直到我重新加载应用程序。

我究竟做错了什么?

constructor(props) {
  super(props)

  this.state = {
    dataState: DataState.STATE_NOT_LOADED,
    dataSource: new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1.identifier !== r2.identifier,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    })
  };
}

componentDidMount() {
  this.loadData();
}

loadData() {
  this.setState({
    dataState: DataState.STATE_LOADING
  });

  User.getDocs()
    .bind(this)
    .then(results => {
      var docs = _.groupBy(results, function (d) {
        return d.createdAt.format('MMMM D');
      });

      this.setState({
        dataState: DataState.STATE_LOADED,
        dataSource: this.state.dataSource.cloneWithRowsAndSections(docs)
      });
    })
    .catch(error => {
      console.log(error);

      this.setState({
        dataState: DataState.STATE_ERROR
      });
    });
}

onTrackPressed(doc) {
  User.untrackDoc(doc)
    .bind(this)
    .tap(() => {
      this.loadData();
    });
}

renderRow(result) {
  return (
    <DocRow
      style={styles.row}
      doc={result}
      tracked={true}
      onPress={() => this.onRowPressed(result)}
      onTrackPress={() => this.onTrackPressed(result)}/>
  );
}
1个回答

我不确定这是否是正确的答案,但它对我有用,直到我能找到更好的解释/更好的答案。

我最近遇到了同样的问题,我正在与之交谈的其他人也有同样的问题。他们通过向 ListView 添加一个关键属性来修复它。显然,您需要向 ListView 添加键,因为表行是超级动态的,似乎每行上没有键会导致 ListView 错误地选择要删除的行。

<ListView
  key={putSomethingUniqueInHere}
  dataSource={this.state.dataSource}
  renderRow={this.renderRow.bind(this)}
/>
谢谢我遇到了同样的问题,添加密钥解决了我的问题:)
2021-06-11 14:46:26
因为ListView使用动态子项key必须将 prop 放置在 - 在这种情况下 - 由绑定renderRow回调返回的最外层组件使用renderSeparator.
2021-06-12 14:46:26