Блог

Я пытаюсь создать список элементов в react native, но я все еще получаю ошибку «У каждого дочернего элемента в списке должен быть уникальный ключ», даже несмотря на то, что вызывается опора keyExtractor. Это происходит только при первом рендеринге, что заставило меня подумать, что это проблема со временем? Я добавил несколько загрузчиков, но я все еще получаю ошибку. Я дважды проверил, что каждый ключ уникален, и это так.

Вот код:

 {showAllItems amp;amp;
 [items?.length > 0 ?
    <FlatList
      showsVerticalScrollIndicator={false}
      ListHeaderComponent={<View style={{ marginTop: 20 }} />}
      ListFooterComponent={<View style={{ marginBottom: 200 }} />}
      data={data}
      renderItem={({ item }) => (
        <SingleFeedCard data={item} reload={getUser} />
        )}
      keyExtractor={item => item.id}
      />
      :
      <Text style={styles.text}>
         Follow people or write a post to fill your Feed.
      </Text>
   ]}
 

Проблема

Вы выполняете рендеринг Flatlist внутри массива {showAllItems amp;amp; [ , что означает Flatlist , что он должен иметь key

 {showAllItems amp;amp;
 [items?.length > 0 ?
    <FlatList
      showsVerticalScrollIndicator={false}
      ListHeaderComponent={<View style={{ marginTop: 20 }} />}
      ListFooterComponent={<View style={{ marginBottom: 200 }} />}
      data={data}
      renderItem={({ item }) => (
        <SingleFeedCard data={item} reload={getUser} />
        )}
      keyExtractor={item => item.id}
      />
      :
      <Text style={styles.text}>
         Follow people or write a post to fill your Feed.
      </Text>
   ]}
 

Решение

 {showAllItems amp;amp;
 items?.length > 0 ?
    <FlatList
      showsVerticalScrollIndicator={false}
      ListHeaderComponent={<View style={{ marginTop: 20 }} />}
      ListFooterComponent={<View style={{ marginBottom: 200 }} />}
      data={data}
      renderItem={({ item }) => (
        <SingleFeedCard data={item} reload={getUser} />
        )}
      keyExtractor={item => item.id}
      />
      :(
      <Text style={styles.text}>
         Follow people or write a post to fill your Feed.
      </Text>
   )}