Javascript 从React Native中的平面列表中删除项目无法正确渲染

使用平面列表在React Native中遇到我的第一个问题

我有一个简单的清单如下：

render() {
    this.state.loadItems.forEach(function(item, index) {
      item.id = index;
    });

    return (       
      <FlatList data={this.state.loadItems} extraData={this.state} renderItem={({item}) => this.renderLineItem(item)} keyExtractor={(item, index) => item.id}/>      
    );       
}

renderLineItem(item) {
  return <LoadListItem id={item.id} loadItem={item} configChanged={this.configHandler} itemRemoved={this.removeHandler}></LoadListItem>
}

removeHandler(index) {    
    var newState = {};
    newState.loadItems = this.state.loadItems.slice(0);
    newState.loadItems.splice(index,1);

    this.setState(newState, this.updateParent);
  }

我正在使用ExtraData，使用slice等克隆数组，但就我而言，列表无法正确呈现。使用调试器，我可以看到在调用set state之后，使用新列表调用render和renderLineItem…但是列表从视觉上删除了错误的项。例如，如果我有一个包含a、B、C、D的列表，并且我删除了C，我可以看到a、B、D的状态更新，我可以使用调试器在呈现方法中验证这些更新，但是呈现直观地显示了a、B、C，因此删除起作用了…但是错误的项。如果我单击另一个选项卡（从视图中删除列表），然后再次打开，它会自行修复。所以状态正在正确更新…但是视图删除了错误的项…有什么想法吗？？

---

干杯

这可能是一个状态不变性和/或索引问题。一般来说，总是尽量避免直接改变状态（即使用this.state.loadItems.forEach（）来设置ID）。以下是一篇关于该主题的有用文章：

理想情况下，您的数据在创建时已经具有唯一的id，但如果您必须自己添加它们，请在数据启动时这样做，无论是从api还是在componentDidMount（）中，而不是在render（）中

由于在删除/添加组件时，索引可能有些易变，因此我还建议将LoadItem的id传递给removeHandler，而不是索引

removeHandler = (id) => {
  // returns new array with item filtered out
  this.setState({
    loadItems: this.state.loadItems.filter(item => item.id === id);
  });
}

---

希望这有帮助，干杯。

这可能是一个状态不变性和/或索引问题。一般来说，总是尽量避免直接改变状态（即使用this.state.loadItems.forEach（）来设置ID）。以下是一篇关于该主题的有用文章：

理想情况下，您的数据在创建时已经具有唯一的id，但如果您必须自己添加它们，请在数据启动时这样做，无论是从api还是在componentDidMount（）中，而不是在render（）中

由于在删除/添加组件时，索引可能有些易变，因此我还建议将LoadItem的id传递给removeHandler，而不是索引

removeHandler = (id) => {
  // returns new array with item filtered out
  this.setState({
    loadItems: this.state.loadItems.filter(item => item.id === id);
  });
}

---

希望这有帮助，干杯。

谢谢，伙计……有意义，希望能在今晚确认。谢谢swimisbell。。。按照你的建议返工，一切都好now@Wombattee很高兴听到这个消息！祝你好运。请未来的读者注意：

filter（）方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素

。这意味着新数组将包含

item.id==id

为真的所有项。谢谢，伙计…有意义希望在今晚确认谢谢swimisbell。。。按照你的建议返工，一切都好now@Wombattee很高兴听到这个消息！祝你好运。请未来的读者注意：

filter（）方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素

。这意味着新数组将包含

item.id==id

为true的所有项。