在React Native中从FlatList中删除项目无法正确呈现

Question

使用平面列表在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>
}

在LoadListItem中，我有一个回调，该回调从状态列表中删除该项目，因为有一个弹出窗口可删除LoadListItem，实现如下：

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

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

我正在使用ExtraData，使用slice等克隆数组，但对我而言，列表无法正确呈现。 使用调试器，我可以看到在设置状态被调用之后，render和renderLineItem被新列表调用了……但是列表在视觉上删除了错误的项。 例如，如果我有一个包含A，B，C，D的列表，并且删除了CI，则可以看到状态已更新为A，B，D ..我可以使用调试器在render方法中进行验证，但该渲染直观地显示了A，B ，C..so删除有效...但是项目错误。 如果单击其他选项卡（从视图中删除列表），然后再次打开，它将自行修复。 因此状态已正确更新...但是视图删除了错误的项目...任何想法？ 干杯

Answer 1

这很可能是状态不变性和/或索引问题。 通常，始终尝试避免直接改变状态（即，使用this.state.loadItems.forEach（）设置ID）。 这是有关此主题的有用文章： https : //medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c

理想情况下，数据在创建时已经具有唯一的ID，但是当您必须自己添加它们时，请在通过api或componentDidMount（）而不是render（）初始化数据时进行添加。

createIdsForData = () => {
  // returns a new array with ids from index
  let dataWithIds = this.state.loadItems.map((item, index) => {
    item.id = index;
  });

  this.setState({
    loadItems: dataWithIds;
  });
}

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

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

希望这会有所帮助，欢呼。