как я могу принести более 10 данных одновременно, используя react-native FlatList?

#javascript #node.js #reactjs #react-native

#javascript #node.js #reactjs #react-native

Вопрос:

у меня есть такие данные

     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 фрагментов данных (с идентификатором: 82 ~ 92) и автоматически повторно отображаются, затем отображаются все данные. (почему id: 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}
                    />
                )}
                />
            );
 

итак, чего я хочу, так это того, что при попытке рендеринга я хочу рендерить все свои данные (с идентификатором: 82 ~ 94) сразу в первый раз

я думаю, причина, по которой возникла эта проблема, заключается в том, что FlatList доставляет данные очень медленно…

тогда как я могу исправить свой код?

Ответ №1:

Попробуйте установить следующее свойство для FlatList:

initialNumToRender={a number larger than 10}

Однако в документах подробно описываются недостатки этого, о которых вы должны знать https://reactnative.dev/docs/flatlist#initialnumtorender

Комментарии:

1. спасибо, это работает, и я прочитаю то, что вы связали!!!