import React, { useState, useEffect } from 'react';
import { List } from 'react-virtualized';
const InfiniteScrollList = () => {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
// 模拟异步加载数据
const fetchData = async () => {
setIsLoading(true);
const response = await fetch('api.example.com/data');
const newData = await response.json();
setData(prevData => [...prevData, ...newData]);
setIsLoading(false);
};
fetchData();
}, []);
const rowRenderer = ({ index, key, style }) => {
// 渲染每一行数据
const item = data[index];
return (
<div key={key} style={style}>
{item}
</div>
);
};
return (
<List
width={500}
height={500}
rowHeight={50}
rowCount={data.length}
rowRenderer={rowRenderer}
isLoading={isLoading}
onScroll={({ scrollTop }) => {
// 判断是否滚动到底部，加载更多数据
if (scrollTop > 0 && scrollTop + 500 >= data.length * 50 && !isLoading) {
fetchData();
}
}}
/>
);
};