反应原生。 过滤器 FlatList - 错误“index=10 count 0”

Question

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

我的过滤器 function 是：

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

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

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

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

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

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

Answer 2

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

相反，当您的 state 尚未加载时，为 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

我需要杀死 FlatList 来修复此错误，如下所示：

    <View>  
      { this.state.data.length > 0 &&   
        <FlatList
          showsVerticalScrollIndicator={false}
          refreshing={false}
          onRefresh={() => this.onRefresh()}
          data={this.state.data}
          extraData={this.state}>}
    </View>

希望这可以帮助！

Answer 4

请改进您的 function。

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

Answer 5

LayoutAnimation会导致类似的问题，不仅是Flatlist ，还有任何类型的列表，检查你是否在你的应用程序中使用它，如果你的顶部组件上有UIManager.setLayoutAnimationEnabledExperimental(true) ，删除它可能会解决你的问题，但会禁用布局动画。

您可能会在此处和此处找到更多信息