反应原生。过滤 FlatList - 错误“索引 = 10 计数 0”

Question

我的任务是过滤一些数组并将其设置为 FlatList。

我的过滤功能是：

updateInvoiceList = (text) => {
  let invoiceList = [...this.state.baseInvoiceList];
    invoiceList = invoiceList.filter(el => {
     return el.name.toLowerCase().includes(text.toLowerCase())
    });
  this.setState({invoiceList})
}

过滤后，我将 state.invoiceList 提供给 FlatList 并且一切正常。但是，当我设置一些不存在于我的数组中的符号时，例如“！”，该函数会清除数组并且它仍然可以正常运行。当我删除符号“！”时，我得到一个错误屏幕：

 index=10 count=0
addInArray
    ViewGroup.java:5235
addViewInner
    ViewGroup.java:5128
addView
    ViewGroup.java:4935
addView
    ReactViewGroup.java:452
addView
    ViewGroup.java:4875
addView
    ReactViewManager.java:269
addView
    ReactViewManager.java:36
manageChildren
    NativeViewHierarchyManager.java:346
execute
    UIViewOperationQueue.java:227
run
    UIViewOperationQueue.java:917
flushPendingBatches
    UIViewOperationQueue.java:1025
access$2600
    UIViewOperationQueue.java:46
doFrameGuarded
    UIViewOperationQueue.java:1085
doFrame
    GuardedFrameCallback.java:29
doFrame
    ReactChoreographer.java:166
doFrame
    ChoreographerCompat.java:84
run
    Choreographer.java:964
doCallbacks
    Choreographer.java:790
doFrame
    Choreographer.java:721
run
    Choreographer.java:951
handleCallback
    Handler.java:883
dispatchMessage
    Handler.java:100
loop
    Looper.java:214
main
    ActivityThread.java:7356
invoke
    Method.java
run
    RuntimeInit.java:492
main
    ZygoteInit.java:930

我做错了什么？

Answer 1

我的代码也遇到了完全相同的问题，在 Flatlist 中并且只出现在 Android 上。我已经设法解决它如下：

我的 FlatList 有

stickyHeaderIndices={this.state.items[1]}

但显然列表在初始化之前加载了 StickyHeader。从这里开始，解决方案只是处理该项目尚未初始化的情况。

stickyHeaderIndices={this.state.items.length > 0 ? [1] : [0]}

希望这可以帮助！解决方案非常简单。调试它可能真的很痛苦！

Answer 2

在 Android 上，您不得使用空数组初始化 FlatList stickyHeaderIndices。

相反，当您的状态尚未加载时，请为 FlatList 提供data一些初始数据并stickyHeaderIndices提供[0]

示例代码如下

let [data, stickyIndices] = someAPIToGetYourData()
...
...
...
// if your data is not finished loading yet
if (data.length === 0) {
  // create not-empty array
  data = getInitialNotEmptyData()
  // add not-empty index
  headerIndexList = [0]
}

return (
  <SafeAreaView>
    <FlatList
      data={data}
      stickyHeaderIndices={headerIndexList /* This must not be empty */ }
      renderItem={item => renderYourItem(item)}
    />
  </SafeAreaView>
)

希望这有帮助！

Answer 3

请完善你的功能。

updateInvoiceList = (text) => {
  let invoiceList = [];
  const { baseInvoiceList } =  this.state;
  if(text){
     invoiceList = baseInvoiceList.filter(item => {
       return item.name.toLowerCase().includes(text.toLowerCase());
     });
 }
 this.setState({invoiceList});
}