我正在尝试使用我的数组数据进行无限滚动。我看到的大多数示例都使用 API 调用并将其pages包含在其中，但是我无法仅使用数组和值来设置每个滚动加载的对象数量。这是我的代码。
import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import InfiniteScroll from 'react-infinite-scroll-component'
const Scroll = ({ tweets }) => {
const [allTweets, setAllTweets] = useState(tweets)
const [hasMore, setHasmore] = useState(true)
const [lastPosition, setLastPosition] = useState(0)
const perPage = 4
const loadProducts = () => {
setTimeout(() => {
setAllTweets(...allTweets, tweets.slice(lastPosition, lastPosition + perPage))
}, 4000)
setLastPosition(lastPosition + perPage)
}
useEffect(() => {
loadProducts()
}, [allTweets])
return (
<InfiniteScroll
dataLength={allTweets.length}
next={loadProducts}
hasMore={hasMore}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
loader={<h4>Loading...</h4>}
>
<div className="flex flex-col">
{allTweets &&
allTweets.slice(lastPosition, lastPosition + perPage).map((value, index) => {
return <div className="py-10 px-5">{value.body}</div>
})}
</div>
</InfiniteScroll>
)
}
export default Scroll
我做了一个我认为你正在尝试做的半功能示例。请注意，此插件似乎只有在您可以滚动时才有效。如果您的内容不够高而无法强制滚动，那么新内容将永远无法加载：
应用程序.js
import React from "react";
import Scroll from "./Scroll";
const App = () => {
const initialTweets = [
{ body: "Body 1" },
{ body: "Body 2" },
{ body: "Body 3" },
{ body: "Body 4" },
{ body: "Body 5" },
{ body: "Body 6" },
{ body: "Body 7" },
{ body: "Body 8" },
{ body: "Body 9" },
{ body: "Body 10" }
];
return (
<div>
<h1>demo: react-infinite-scroll-component</h1>
<hr />
<Scroll tweets={initialTweets} />
</div>
);
};
export default App;
滚动.jsx
import React, { useCallback, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
const Scroll = ({ tweets }) => {
const [allTweets, setAllTweets] = useState(tweets);
const [hasMore, setHasmore] = useState(true);
const [lastPosition, setLastPosition] = useState(0);
const perPage = 4;
const loadProducts = useCallback(() => {
setTimeout(() => {
setAllTweets((prev) => [...prev, ...prev]);
}, 2000);
setLastPosition(lastPosition + perPage);
}, []);
console.log(allTweets);
return (
<InfiniteScroll
dataLength={allTweets.length}
next={loadProducts}
hasMore={hasMore}
loader={<h4>Loading...</h4>}
>
<div className="flex flex-col">
{allTweets.map((value, index) => (
<div key={index} className="py-10 px-5">
{value.body}
</div>
))}
</div>
</InfiniteScroll>
);
};
export default Scroll;
您需要调整事情以完全按照您的意愿行事，但这应该为您指明正确的方向。
注意：要在 codeandbox 中查看这项工作，请缩小演示窗口，以便您可以滚动或将更多对象添加到initialTweets数组中。此外，您可以在项目主页上找到许多示例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句