React Native -- FlatList 只显示分页的最后一项答案

【问题标题】：React Native -- FlatList show only last item of paginationReact Native -- FlatList 只显示分页的最后一项
【发布时间】：2022-11-17 15:43:59
【问题描述】：

我正在使用一个 FlatList 来实现分页。当用户转到列表的页脚时，它会点击 API，然后我将数据添加到现有数组中。当用户转到页脚并点击 API 时一切正常，然后新数据将添加到旧数据中，完整数据在列表中显示一分钟，然后旧数据突然消失，新数据仅留在列表中。

接口代码

 const getCards = () => {
const token = JWTToken('');

var axios = require('axios');
var data = JSON.stringify({
  userName: userName.toLocaleLowerCase(),
  userEmail: email,
  userId: userId,
  channel: userSelectedChannel,
  rangeKey: lastKey,
});

// console.log('data feed ', data);
var config = {
  method: 'post',
  url: BASE_URL + GET_CARDS,
  headers: {
    'x-jwt-token': token,
    'Content-Type': 'application/json',
  },
  data: data,
};

axios(config)
  .then(function (response) {
    setLoader(false);

    const res = response.data.message;
    setCount(count + 1);

    if (res.hasOwnProperty('LastEvaluatedKey')) {
      const lastEvaluatedKey =
        response.data.message.LastEvaluatedKey.createdAt;

      console.log('last key', lastEvaluatedKey);
      setLastKey(lastEvaluatedKey);
    } else {
      setLastKey('');
    }

    setFeed([...feedArray, ...response.data.message.Items]);

    // addDataTolocalStorage()
    // setFeed(response.data.message.Items);
  })
  .catch(function (error) {
    console.log('feed error', error);
    setLoader(false);
    Alert.alert('Oops!Something went wrong');
  });
};

const handleOnEndReached = async () => {
console.log('count is', count);

if (lastKey !== '' || (lastKey === '' && count === 1)) {
  setLoadingMore(true);
  if (!stopFetchMore) {
    console.log('calling pagination cards');
    getCards();

    stopFetchMore = true;
    setLoadingMore(false);
  }

  // console.log('evaluadted response', response);
}
};

平面列表渲染

<FlatList
          data={feedArray}
          renderItem={({item, index}) => (
            <RenderCard
              item={item}
              navigation={navigation}
              index={index}
              managePost={false}
              isPaymentReport={false}
              isBookmark={false}
              previewMode={false}
              isPinnedPost={false}
            />
          )}
          numColumns={1}
          keyExtractor={(item, index) => index}
          contentContainerStyle={{
            marginBottom: height * 0.1,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'transparent',
          }}
          showsVerticalScrollIndicator={false}
          onEndReachedThreshold={0.5}
          bounces={false}
          onEndReached={handleOnEndReached}
          onScrollBeginDrag={() => {
            stopFetchMore = false;
          }}
          ListFooterComponent={() => loadingMore && <ListFooterComponent />}
        />

请帮忙。

【问题讨论】：

标签： reactjs react-native api pagination react-native-flatlist

【解决方案1】：

您可以替换此行

onEndReached={handleOnEndReached}

至

onEndReached={() => handleOnEndReached()}

因为问题是当你这样写的时候onEndReached={handleOnEndReached} 无论是否到达终点，它每次都会调用。

【讨论】：