1 回答

TA貢獻(xiàn)1835條經(jīng)驗(yàn) 獲得超7個(gè)贊
如果我們可以看到InfiniteScroll組件代碼,我們可能可以更好地幫助您,但本質(zhì)上,您必須執(zhí)行如下操作。
interface Props<T> {
fetcher: (page: number) => Promise<T[]>;
children: (data: T[]) => JSX.Element;
}
export const InfiniteScroll = <T extends unknown>({
fetcher,
children
}: Props<T>) => {
const [page, setPage] = useState(1);
const [data, setData] = useState<T[] | null>(null);
useEffect(() => {
fetcher(page).then((res) => {
setData(res);
});
}, [page]);
if (!data) return (
<p> loading... </p>
)
return (children(data))
};
應(yīng)用程序.tsx:
export default function App() {
return (
<>
<InfiniteScroll fetcher={(page: number) => getData(page)}>
{(items) => (<>
{(items.map((item,
index) => <p key={index}> {item.name} </p> ))}
</>)}
</InfiniteScroll>
</>
);
}
添加回答
舉報(bào)