react-native-swipe-list-view排序数据变更后如何触发列表刷新

SwipeListView 是对原生列表组件的封装，当前配置不生效主要是三个配置和写法问题，按以下步骤修改即可：

• 首先取消useFlatList={true}的注释
  SwipeListView 默认底层用的是已废弃的老版ListView组件，该组件不支持extraData属性触发刷新，只有开启这个配置，让组件底层切换为 FlatList 实现，你写的extraData配置才会生效。

• 排序更新状态时必须生成新的数组引用
  React 状态更新做浅对比，如果你直接在原数组上调用sort()方法修改，再把同一个数组引用传入setProductSortList，React 会判定状态没有变化，不会触发重渲染。排序时要先创建数组副本再做排序，参考写法：

  // 升序逻辑示例，按实际排序字段替换比较逻辑即可
  const sortAsc = () => {
    const newList = [...productArraylist].sort((item1, item2) => item1.targetField - item2.targetField)
    setProductSortList(newList)
  }
  
  // 降序逻辑示例
  const sortDesc = () => {
    const newList = [...productArraylist].sort((item1, item2) => item2.targetField - item1.targetField)
    setProductSortList(newList)
  }
  

• 修复边界问题和初始状态同步问题

  1. 你当前直接写previewRowKey={productSortList[0].id}，列表为空时会直接报错，需要加空值判断：previewRowKey={productSortList.length ? productSortList[0].id : null}
  2. 如果productArraylist是接口异步返回的数据，不要只把它当useState初始值，要在接口请求成功的回调里主动调用setProductSortList(接口返回的数组)，保证初始数据能同步到列表状态。

修改完成后的组件配置参考：

<SwipeListView
  useFlatList={true}
  ListEmptyComponent={FlatlistEmpty()}
  showsVerticalScrollIndicator={false}
  keyExtractor={(item) => item.id}
  data={productSortList}
  renderItem={renderProduct}
  renderHiddenItem={renderHiddenItem1}
  rightOpenValue={-345}
  previewRowKey={productSortList.length ? productSortList[0].id : null}
  previewOpenValue={-400}
  previewOpenDelay={1000}
  extraData={productSortList}
/>

内容的提问来源于stack exchange，提问作者Arnold Brown