javascript - Removing items from a FlatList in React Native not rendering correctly - Stack Overflow

admin管理员组

文章数量:1332395

Come across my first issue in React Native using a Flat List

I have a flat list as follows:

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>
}

In LoadListItem I have a callback which removes the item from the state list, as there is a popup to delete a LoadListItem, this is implemented as follows:

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

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

I am using ExtraData, cloning the array using slice etc but for the life of me the list does not render correctly. Using the debugger I can see that after set state gets called then render and renderLineItem get called with the new list...but the list visually has removed the wrong item. For instance if I have a list with A,B,C,D and I delete C I can see state update to A,B,D..which I can verify in the render methods using the debugger but the render visually shows A,B,C..so the delete has worked...but wrong item. If I click to a different tab (to remove the list from the view) and then back on again it fixes itself. So the state is being updated correctly...but the view removes the wrong item...Any Ideas?? Cheers

Come across my first issue in React Native using a Flat List

I have a flat list as follows:

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>
}

In LoadListItem I have a callback which removes the item from the state list, as there is a popup to delete a LoadListItem, this is implemented as follows:

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

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

I am using ExtraData, cloning the array using slice etc but for the life of me the list does not render correctly. Using the debugger I can see that after set state gets called then render and renderLineItem get called with the new list...but the list visually has removed the wrong item. For instance if I have a list with A,B,C,D and I delete C I can see state update to A,B,D..which I can verify in the render methods using the debugger but the render visually shows A,B,C..so the delete has worked...but wrong item. If I click to a different tab (to remove the list from the view) and then back on again it fixes itself. So the state is being updated correctly...but the view removes the wrong item...Any Ideas?? Cheers

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Feb 5, 2018 at 14:09 WombatteeWombattee 1311 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This is likely a state immutability and/or index issue. As a general rule, always try to avoid mutating state directly (i.e. using this.state.loadItems.forEach() to set ids). Here's a helpful article on the subject: https://medium./pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c

Ideally your data would have a unique id already when created, but when you have to add them yourself, do so when the data is initiated, either from an api or in ponentDidMount(), not in 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;
  });
}

Since indexes can be somewhat fickle when it es to deleting/adding ponents, I would also remend passing the id of the LoadItem to your removeHandler instead of an index.

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

Hope this helps, cheers.

本文标签： javascriptRemoving items from a FlatList in React Native not rendering correctlyStack Overflow