ListView удаляет неправильную строку при обновлении источника данных

Question

У меня есть React Native ListView, который, кажется, удаляет неправильную строку в пользовательском интерфейсе, когда я обновляю состояние новыми разделами и строками. Удаленная строка остается, но та, которая иногда или даже 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, потому что строки таблицы являются супер динамическими, и кажется, что отсутствие ключа в каждой строке заставляло ListView неправильно выбирать, какую строку удалять.

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