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

Question

我使用的是一个FlatList，我在其中实现分页。当用户转到列表的页脚时，它会点击API，然后我将数据添加到现有数组中。当用户转到页脚并点击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 />}
/>

请帮忙。

Answer 1

您可以替换这行

onEndReached={handleOnEndReached}

至

onEndReached={() => handleOnEndReached()}

因为问题是当你这样写onEndReached={handleOnEndReached}无论它是否到达终点，它都会呼叫。