在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);
  });
}

希望這會有所幫助，歡呼。