react-infinite-scroll-component 用数组加载更多

Question

我正在尝试对我的数组数据进行无限滚动。我看到的大多数示例都使用 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

Answer 1

我做了一个semi-functioning example 我认为你正在尝试做的事情。请注意，这个插件似乎只有在您可以滚动时才能工作。如果您的内容不够高，无法强制滚动，那么新内容将永远无法加载：

App.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;

Scroll.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;

您需要进行调整以完全按照您的意愿行事，但这应该为您指明正确的方向。

注意：要在代码框中查看这项工作，请缩小演示窗口以便滚动或将更多对象添加到 initialTweets 数组。此外，您还可以在 project's homepage 上找到许多示例。