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

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

构造函数（道具）{
超级（道具）
此.state={
dataState:dataState.STATE\u未加载，
数据源：新建ListView.dataSource({
行已更改：（r1，r2）=>r1.identifier！==r2.identifier，
节头更改：（s1，s2）=>s1！==s2
})
};
}
componentDidMount（）{
这是loadData（）；
}
loadData（）{
这是我的国家({
dataState:dataState.STATE\u加载
});
User.getDocs（）
.绑定（此）
。然后（结果=>{
var docs=u.groupBy（结果，函数（d）{
返回d.createdAt.format（'MMMM d'）；
});
这是我的国家({
dataState:dataState.STATE\u已加载，
数据源：this.state.dataSource.cloneWithRowsAndSections（文档）
});
})
.catch（错误=>{
console.log（错误）；
这是我的国家({
dataState:dataState.STATE\u错误
});
});
}
onTrackPressed（文档）{
用户未跟踪文档（doc）
.绑定（此）
.tap（（）=>{
这是loadData（）；
});
}
renderRow（结果）{
返回(
此.onRowPressed（结果）}
onTrackPress={（）=>this.onTrackPress（结果）}/>
);
}

我不确定这是否是正确的答案，但在我找到更好的解释/更好的答案之前，它对我很有效

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

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

因为

ListView

使用了

键

在这种情况下，必须将prop放置在绑定的

renderRow

回调返回的最外层组件上。使用

renderSeparator

创建的任何分隔符也是如此。谢谢，我遇到了同样的问题，添加密钥解决了我的问题：）