javascript - 从 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，使用切片等克隆数组，但在我的一生中，列表无法正确呈现。使用调试器，我可以看到在调用 set state 后，然后使用新列表调用 render 和 renderLineItem...但列表在视觉上已删除了错误的项目。例如，如果我有一个包含 A、B、C、D 的列表，并且我删除了 C，我可以看到状态更新为 A、B、D..，我可以使用调试器在渲染方法中进行验证，但渲染会直观地显示 A、B ，C..所以删除有效...但是错误的项目。如果我单击另一个选项卡(以从 View 中删除列表)然后再次返回，它会自行修复。所以状态正在正确更新...但是 View 删除了错误的项目...有什么想法吗？干杯

Answer 1

这可能是状态不变性和/或索引问题。作为一般规则，始终尝试避免直接改变状态(即使用 this.state.loadItems.forEach() 来设置 ids)。这是关于该主题的有用文章: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);
  });
}

希望这有帮助，干杯。