Блог

У меня есть плоский список, который, как ни странно, корректно отображается только после прокрутки. Кроме того, при обновлении он отображается на долю секунды, а затем снова исчезает. Сам плоский список содержит только 3 элемента.

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

 <View style={{flex: 1}}>
  <FlatList
      data={cartItems}
      renderItem={({item}) => (
          <CartItemCard
              event={item.event_name}
              ticketType={item.title}
              ticketImage={item.image}
              price={item.price}
          />
      )}
      keyExtractor={item => item.id}
      style={{
          flex: 1,
          backgroundColor: "#49424D",
          paddingVertical: 60,
      }}
      contentContainerStyle={{
          alignItems: 'center',
          paddingVertical: 10,
      }}
  />
</View> 

Вы хоть представляете, что я делаю неправильно?

Похоже, это известная проблема: https://github.com/facebook/react-native/issues/13316

Согласно документу, вы должны передать ExtraData в FlatList, чтобы он знал о повторном рендеринге:

Передавая extrad={selectedId} в FlatList, мы гарантируем, что сам FlatList будет повторно отображаться при изменении состояния. Без установки этого реквизита FlatList не будет знать, что ему нужно повторно отображать какие-либо элементы, потому что это PureComponent, и сравнение реквизита не покажет никаких изменений.