反应-无限滚动-组件负载更多与数组。

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

我做了一个半功能示例，我认为你想做的事情。请注意，这个插件似乎只在你可以滚动的情况下才能工作。如果您的内容不够高，无法强制滚动，那么新内容将永远无法加载：

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数组添加更多的日志对象。此外，您还可以在项目主页上找到许多示例。