在反应本机平面列表中加载更多数据 onEndReached 滚动到反应本机平面列表的顶部

Question

Gif file here

在上面的 gif 中，您可以看到当我滚动到末尾时，在加载额外数据并附加它之后，滚动会重置并滚动到顶部。

这是代码

状态变量声明

const [data, setData] = useState([]); //Contains the fetched data
const [isFetching, setFetching] = useState(false); //To indicate status

获取数据功能

const fetchMarketData = async () => {
const marketData = await getCryptoMarketData({ page });
if (marketData.status != 401) {
  setData(
    data.length > 0
      ? marketData.filter((d) => data.forEach((s) => d.ticker != s.ticker)) //Appending new data id the data is not empty
      : marketData //If the data is empty then it's the first fetch.
  ); 
  setFetching(false);
} else {
  setFetching(false);
  Alert.alert(marketData, "Sorry for the inconvenience");
}

};

使用Effect函数

useEffect(() => {
setFetching(true);
const data = async () => {
  await fetchMarketData();
};
data();
}, []);

加载更多数据

 const handleLoadMore = () => {
    setFetching(true);
    setPage(() => page + 1);
    () => fetchMarketData;
  };

页脚指示符

 const renderFooter = () => {
    return isFetching ? (
      <View style={{ marginTop: 10, alignItems: "center" }}>
        <ActivityIndicator size="large" color="#1f1f1f" />
      </View>
    ) : null;
  };

平面列表

<BottomSheetFlatList
      ref={scrollRef}
      data={data}
      style={{ backgroundColor: "white" }}
      keyExtractor={(item) => item.id}
      renderItem={renderItems} //Render items just displays the data
      maxToRenderPerBatch={20}
      scrollEventThrottle={16}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0}
      ListFooterComponent={renderFooter}
    />

Answer 1

原因是因为你是REPLACING而不是APPENDING状态，换句话说你是替换数据而不是添加新的

正在替换：

setState([{}])

追加：

let nextPageData = [{}]
setState([...state, ...nextPageData])

所以针对你的情况的修复是这样的（但我不确定什么时候发生了假，因为正常 API 不会向你发送旧数据，只是总是新的......这可能也是你这边的错误）

let newData = data.length > 0 ? marketData.filter((d) => data.forEach((s) => d.ticker != s.ticker)) : marketData
setData([...data, ...newData]);

在反应本机平面列表中加载更多数据 onEndReached 滚动到反应本机平面列表的顶部

Loading more data onEndReached in react-native faltlist is scrolling to top of the flatlist in react native

react-native

use-effect

react-native-flatlist

setstate