Flatlist删除列表中的某一个item，并刷新界面显示

最新推荐文章于 2024-08-06 16:45:24 发布

原创最新推荐文章于 2024-08-06 16:45:24 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

React-Native 同时被 2 个专栏收录

22 篇文章

订阅专栏

JavaScript

8 篇文章

订阅专栏

本文讲述了在遇到Flatlist中点击item删除后，界面未能及时更新的问题及解决方案。通过调整keyExtractor的设置，确保了数据源改变时列表能够正确刷新。尝试了网上提供的方法1和方法2未解决问题，最终通过改进keyExtractor实现列表更新。

花了一上午时间，研究了一下当点击Flatlist的某一个item，然后删除这个item

具体的点击事件：

  //item点击事件回调
    _clickTransactionItem = (transTp, transactionItem, index,acctTpId) => {
        let arr0 = this.state.pointTransList;
        arr0.splice(index, 1);
        this.setState({
            pointTransList:arr0
        })
        // this.props.clickItemCallBack && this.props.clickItemCallBack(transTp, transactionItem, index,acctTpId);
    }

但是测试，发现数据源改变了，界面没有改变。网上看了些方法：

方法1:flatlist 增加属性1

extraData={this.state}

方法2:flatlist增加属性2

handleMethod = {({viewableItems}) => this.handleViewableItemsChanged(viewableItems)}

试了，还是没解决。最后想到了keyExtractor，我的写法是：

keyExtractor={this._keyExtractor}


_keyExtractor = (item, index) => index.toString();

这个是不是太简单了，隐约记得官网有提到列表更新要写得复杂一点，于是改成了这样：

  _keyExtractor = (item, index) => item.transDt + index.toString();

完美解决列表更新的问题。官网给的解释是：

`keyExtractor`

Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does.

所以如果在有更新列表时，这个key稍微写得复杂一点。