Flatlist перезаписывает предыдущие данные - PullRequest
Новая
       7

Flatlist перезаписывает предыдущие данные

0 голосов
/ 01 апреля 2020

Проблема

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

Код

Старые данные 

const [resultsData, setResultsData] = useState([
    { description: '10/10/2019', reportId: 2131231734, reportNumber: 2131231734 },
    { description: '12/10/2019', reportId: 2131231636, reportNumber: 2131231636 },
    { description: '15/10/2019', reportId: 2131231777, reportNumber: 2131231777 },
    { description: '12/11/2019', reportId: 2131231666, reportNumber: 2131231666 },
    { description: '10/10/2019', reportId: 2131231555, reportNumber: 2131231555 },
    { description: '10/10/2019', reportId: 2131231444, reportNumber: 2131231444 },
    { description: '10/10/2019', reportId: 2131231333, reportNumber: 2131231333 },
    { description: '10/10/2019', reportId: 2131231222, reportNumber: 2131231222 },
    { description: '10/10/2019', reportId: 2131231111, reportNumber: 2131231111 },
    { description: '10/10/2019', reportId: 2131231000, reportNumber: 2131231000 },
  ]);

Новые данные, которые я нужно добавить 

const _showMore = () => {
    setRefresh(true);
    setResultsData([
      ...resultsData,
      { description: '10/10/2019', reportId: 32131231734, reportNumber: 2131231734 },
      { description: '12/10/2019', reportId: 32131231636, reportNumber: 2131231636 },
      { description: '15/10/2019', reportId: 32131231777, reportNumber: 2131231777 },
      { description: '12/11/2019', reportId: 32131231666, reportNumber: 2131231666 },
      { description: '10/10/2019', reportId: 42131231555, reportNumber: 2131231555 },
      { description: '10/10/2019', reportId: 52131231444, reportNumber: 2131231444 },
      { description: '10/10/2019', reportId: 62131231333, reportNumber: 2131231333 },
      { description: '10/10/2019', reportId: 27131231222, reportNumber: 2131231222 },
      { description: '10/10/2019', reportId: 82131231111, reportNumber: 2131231111 },
      { description: '10/10/2019', reportId: 92131231000, reportNumber: 2131231000 },
    ]);
    setRefresh(false);
  };

Компонент 

const _renderReportCard = ({ item }) => (
    <GenericListItem
      textLeft={item.reportId}
      icon={downloadIcon}
      onPress={() => fetchResultDetails(item.reportId)}
      textRight={item.description}
    />
  );
  return (
    <StyledContainer>
      <ReportsList
        style={{ flex: 1 }}
        initialNumToRender={resultsData.length}
        extraData={resultsData}
        data={resultsData}
        keyExtractor={_keyExtractor}
        renderItem={_renderReportCard}
        getItemLayout={(data, index) => ({ length: 40, offset: 40 * index, index })}
        onRefresh={_showMore}
        refreshing={refresh}
      />
      <View>
        <ShowMore onPress={_showMore}>
          <ShowMoreText>{t('show').toUpperCase()}</ShowMoreText>
        </ShowMore>
      </View>
    </StyledContainer>
  );

Ожидаемое поведение

Мне нужно, когда я нажимаю Кнопка ПоказатьБолее, чтобы увидеть все 20 элементов.

1 Ответ

1 голос
/ 01 апреля 2020

Я воссоздал ваш пример, и он работает нормально.

Код: 

export default function App() {

  const [resultsData, setResultsData] = React.useState([
    { description: '10/10/2019', reportId: 2131231734, reportNumber: 2131231734 },
    { description: '12/10/2019', reportId: 2131231636, reportNumber: 2131231636 },
    { description: '15/10/2019', reportId: 2131231777, reportNumber: 2131231777 },
    { description: '12/11/2019', reportId: 2131231666, reportNumber: 2131231666 },
    { description: '10/10/2019', reportId: 2131231555, reportNumber: 2131231555 },
    { description: '10/10/2019', reportId: 2131231444, reportNumber: 2131231444 },
    { description: '10/10/2019', reportId: 2131231333, reportNumber: 2131231333 },
    { description: '10/10/2019', reportId: 2131231222, reportNumber: 2131231222 },
    { description: '10/10/2019', reportId: 2131231111, reportNumber: 2131231111 },
    { description: '10/10/2019', reportId: 2131231000, reportNumber: 2131231000 },
  ]);

const _showMore = () => {

    setResultsData([
      ...resultsData,
      { description: '10/10/2019', reportId: 32131231734, reportNumber: 2131231734 },
      { description: '12/10/2019', reportId: 32131231636, reportNumber: 2131231636 },
      { description: '15/10/2019', reportId: 32131231777, reportNumber: 2131231777 },
      { description: '12/11/2019', reportId: 32131231666, reportNumber: 2131231666 },
      { description: '10/10/2019', reportId: 42131231555, reportNumber: 2131231555 },
      { description: '10/10/2019', reportId: 52131231444, reportNumber: 2131231444 },
      { description: '10/10/2019', reportId: 62131231333, reportNumber: 2131231333 },
      { description: '10/10/2019', reportId: 27131231222, reportNumber: 2131231222 },
      { description: '10/10/2019', reportId: 82131231111, reportNumber: 2131231111 },
      { description: '10/10/2019', reportId: 92131231000, reportNumber: 2131231000 },
    ]);


  };
  const renderItem = (item) => {
    console.log('length', resultsData.length);
    return (
        <View key={item.reportId}>
          <Text> {item.reportId} </Text>
        </View>
    );
  }
  return (
    <View style={styles.container}>
      <FlatList 
        data={resultsData}
        renderItem={({item}) => renderItem(item)}
      />
      <Button onPress={() => _showMore()} title="Show more" />
    </View>
  );
}

Демонстрация:

https://snack.expo.io/hVEo7rPnFm

...