Flatlist 覆盖之前的数据

Question

问题

我有一个平面列表，在用户点击“显示更多”按钮后，这个平面列表需要填充额外的项目。如果我按下按钮，我可以更新组件的状态，但平面列表不会呈现旧项目。它只是覆盖它们。我不明白我错过了什么

代码

旧数据

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>
  );

预期行为

我需要在按下 ShowMore 按钮时查看所有 20 个项目。

Answer 1

我重新创建了您的示例，它运行良好。

代码：

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

Flatlist 覆盖之前的数据

Flatlist overwrite previous data

react-native

react-native-flatlist