反应无限滚动组件- dataLength不工作

Question

我有一个函数newsFeed，它由useEffect调用，并向端点发出请求，以获取登录用户以及他们跟踪的任何用户所做的所有帖子，然后将数据响应保存到状态：

const [posts, setPosts] = useState([])
const [page, setPage] = useState(1)

useEffect(() => {
    newsFeed();
}, []

const newsFeed = async () => {
    await axios.post(
        `${process.env.REACT_APP_API}/news-feed/${page}`,
    )
    .then((res) => {
        setPosts(res.data);
        setPage(page + 1);
    })
    .catch((err) => {
        console.log(err);
    });
};

router.post('/news-feed/:page', newsFeed);

exports.newsFeed = async (req, res) => {
    try {
        const user = await User.findById(req.body.user._id);
        let following = user.following;
        following.push(req.body.user._id);

        const currentPage = req.params.page || 1;
        const perPage = 5;

        const posts = await Post.find({ postedBy: { $in: following } })
        .skip((currentPage - 1) * perPage)
        .sort({createdAt: -1})
        .limit(perPage);
        res.json(posts);
    } catch (err) {
        console.log(err);
    }
};

我想使用react-infinite-scroll-component只获取页面加载上的前20篇文章，然后当用户滚动到底部时再取20篇文章。

我现在有这样的代码来呈现文章：

<div id='scrollableDiv' style={{ overflow: 'auto' }}>
    <InfiniteScroll
      dataLength={20}
      next={newsFeed}
      hasMore={true}
      loader={<FontAwesomeIcon icon={faSpinner} spin />}
      endMessage={
        <p style={{ textAlign: 'center' }}>
          <b>Yay! You have seen it all</b>
        </p>
      }
      scrollableTarget='scrollableDiv'
    >
        {posts.map((post) => (
        ...)}
    </InfiniteScroll>
</div>

现在正在发生的是，只呈现前20个帖子，加载旋转器在下面连续显示。

我尝试将page作为一个依赖项添加到useEffect回调中，这确实会导致以20个块的形式加载这些帖子，但是它们每秒钟都会自动呈现，并与前一个块重叠，就好像应用程序确实在改变页面一样，并且当所有的帖子都被呈现为空屏幕时就会显示出来。

Answer 1

您的问题似乎是，您的后端每次调用它时都返回所有记录，因为没有参数传递给它：

await axios.post(
    `${process.env.REACT_APP_API}/news-feed`,
)

这与组件的文档不一致，该文档指出：

--数据作为子级传递给InfiniteScroll组件，数据也应该包含以前的项。例如，初始数据= 1，2，3，然后下一个数据负载应该是1，2，3，4，5，6。

因此，您需要告诉后端要返回哪些项集，然后将这些项附加到先前调用中已经加载的帖子中。

例如，保留需要返回的页面的引用，并使用参数调用后端：

//In state declaration
const [pageNumber, setPageNumber] = useState(1);

//In loader function
await axios.post(
    `${process.env.REACT_APP_API}/news-feed/{pageNumber}`,
) 

如果pageNumber是一个状态与当前页码保持状态的变量，那么每次收到项时都会增加它。与…有关的东西：

await axios.post(
    `${process.env.REACT_APP_API}/news-feed/{pageNumber}`,
)
.then((res) => {
    let newPosts = posts;
    newPosts.concat(res.data);
    setPosts(newPosts);
    setPageNumber(pageNumber + 1);
})

如果无法修改后端以支持分页，则必须每次检索所有记录，并将其切片以选择需要追加的记录。不是很难但效率很低。就像这样：

//In state declaration
const [pageNumber, setPageNumber] = useState(0); //0 based

//In data loader
await axios.post(
    `${process.env.REACT_APP_API}/news-feed`,
)
.then((res) => {
    let newPosts = posts;
    let start = (pageNumber === 0) ? 0 : (pageNumber * 20) - 1;
    let addPosts = res.data.slice(start, 20);
    newPosts = newPosts.concat(addPosts);
    setPosts(newPosts);
    setPageNumber(pageNumber + 1);
})

我匆忙地写了这篇文章，所以一定要检查记录的一致性和结束。你明白了吧。:-)