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

Question

我有一个 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)}/>
  );
}

Answer 1

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

我最近也有同样的问题，和我交谈的其他人也有同样的问题。他们通过向 ListView 添加一个关键属性来修复此问题。显然，您需要向 ListView 添加键，因为表行是 super 动态的，并且似乎每行上没有键会导致 ListView 错误地选择要删除的行。

<ListView
  key={putSomethingUniqueInHere}
  dataSource={this.state.dataSource}
  renderRow={this.renderRow.bind(this)}
/>