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

在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 2

请改善您的功能。

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 3

我的代码完全相同，在Flatlist中，仅在Android上显示。我设法解决了以下问题：

我的FlatList有

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

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

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

希望这会有所帮助！解决方案非常简单。调试它可能是一个真正的痛苦！

Answer 4

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

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

希望这会有所帮助！

Answer 5

LayoutAnimation 会导致类似的问题，不仅是 Flatlist，还有任何类型的列表，请检查您是否在您的应用中使用它，以及您的顶部组件是否有 UIManager.setLayoutAnimationEnabledExperimental(true)，删除它可能会解决您的问题，但会禁用 layoutAnimations。

您可能会找到更多信息 here 和 here

反应本机。筛选器FlatList-错误“索引= 10计数0”

5 个答案: