如何使用 react-native FlatList 一次带来 10 多个数据？

Question

我有这样的数据

    singlePost?.Comments = [
        0: {id: 82, content: "부모1", responseTo: null}
        1: {id: 83, content: "자식1", responseTo: 82}
        2: {id: 84, content: "부모2", responseTo: null}
        3: {id: 85, content: "자식2", responseTo: 84}
        4: {id: 86, content: "부모3", responseTo: null,}
        5: {id: 87, content: "자식3", responseTo: 86}
        6: {id: 88, content: "부모4", responseTo: null}
        7: {id: 90, content: "자식4", responseTo: 88,}
        8: {id: 91, content: "부모5", responseTo: null}
        9: {id: 92, content: "자식5", responseTo: 91,}
        10: {id: 93, content: "부모6", responseTo: null}
        11: {id: 94, content: "자식6", responseTo: 93}
                             ]

当我尝试使用 FlatList 渲染我的所有数据时，第一次只渲染了 10 条数据（id：82~92），并自动重新渲染，然后渲染了所有数据。 （编号为：82~ 94）

像这样

     console.log(item)

 

  item 0: {id: 82, content: "부모1", responseTo: null}
  item 1: {id: 83, content: "자식1", responseTo: 82}
  item 2: {id: 84, content: "부모2", responseTo: null}
  item 3: {id: 85, content: "자식2", responseTo: 84}
  item 4: {id: 86, content: "부모3", responseTo: null,}
  item 5: {id: 87, content: "자식3", responseTo: 86}
  item 6: {id: 88, content: "부모4", responseTo: null}
  item 7: {id: 90, content: "자식4", responseTo: 88,}
  item 8: {id: 91, content: "부모5", responseTo: null}
  item 9: {id: 92, content: "자식5", responseTo: 91,}

  item 0: {id: 82, content: "부모1", responseTo: null}
  item 1: {id: 83, content: "자식1", responseTo: 82}
  item 2: {id: 84, content: "부모2", responseTo: null}
  item 3: {id: 85, content: "자식2", responseTo: 84}
  item 4: {id: 86, content: "부모3", responseTo: null,}
  item 5: {id: 87, content: "자식3", responseTo: 86}
  item 6: {id: 88, content: "부모4", responseTo: null}
  item 7: {id: 90, content: "자식4", responseTo: 88,}
  item 8: {id: 91, content: "부모5", responseTo: null}
  item 9: {id: 92, content: "자식5", responseTo: 91,}
  item 10: {id: 93, content: "부모6", responseTo: null}
  item 11: {id: 94, content: "자식6", responseTo: 93}

这是我的代码

          return (
                <ContaiFlatListner
                data={singlePost?.Comments}
                keyExtractor={(item) => String(item.id)}
                
                ListEmptyComponent={<EmptyItem />}
                renderItem={({item}) => (
                    console.log("item:",item),
                    <TodoItem
                    item={item}
                    />
                )}
                />
            );

所以我想要的是，当我尝试渲染时，我想第一次渲染我的所有数据（id：82~94）

我认为这个问题发生的原因是 FlatList 带来的数据非常慢......

那么我该如何修复我的代码？

Answer 1

尝试在 FlatList 上设置以下属性：

initialNumToRender={a number larger than 10}

但是文档确实详细说明了这样做的缺点，您应该注意https://reactnative.dev/docs/flatlist#initialnumtorender