Reactjs 反应无限滚动组件加载更多阵列

我试图用我的数据做一个无限滚动，它是一个数组。我看到的大多数示例都使用API调用，其中包含了

页面

，但我在使用数组和值来设置每个滚动加载多少对象时遇到了问题。这是我的密码

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

import React，{useState，useffect}来自“React”
从“道具类型”导入道具类型
从“反应无限滚动组件”导入无限滚动
常量滚动=（{tweets}）=>{
常量[allTweets，setAllTweets]=useState（tweets）
const[hasMore，setHasmore]=useState（true）
常量[lastPosition，setLastPosition]=useState（0）
每页常数=4
const loadProducts=（）=>{
设置超时（（）=>{
setAllTweets（…allTweets，tweets.slice（lastPosition，lastPosition+每页））
}, 4000)
设置最后位置（最后位置+每页）
}
useffect（（）=>{
装载产品（）
}，[allTweets]）
返回(
{所有推特&&
allTweets.slice（lastPosition，lastPosition+每页）.map（（值，索引）=>{
返回{value.body}
})}
)
}
导出默认滚动条

我对你想做的事做了充分的分析。请注意，这个插件似乎只有在您可以滚动的情况下才能工作。如果您的内容不够高，无法强制滚动，则无法加载新内容：

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;

从“React”导入React；
从“/Scroll”导入滚动；
常量应用=（）=>{
const initialTweets=[
{正文：“正文1”}，
{正文：“正文2”}，
{正文：“正文3”}，
{正文：“正文4”}，
{正文：“正文5”}，
{正文：“正文6”}，
{正文：“正文7”}，
{正文：“正文8”}，
{正文：“正文9”}，
{正文：“正文10”}
];
返回(
演示：react无限滚动组件

);
};
导出默认应用程序；

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;

import React，{useCallback，useState}来自“React”；
从“反应无限滚动组件”导入无限滚动；
常量滚动=（{tweets}）=>{
const[allTweets，setAllTweets]=useState（tweets）；
const[hasMore，setHasmore]=useState（true）；
const[lastPosition，setLastPosition]=useState（0）；
每页常数=4；
const loadProducts=useCallback（（）=>{
设置超时（（）=>{
setAllTweets（（prev）=>[…prev，…prev]）；
}, 2000);
设置最后位置（最后位置+每页）；
}, []);
console.log（所有tweets）；
返回(
{allTweets.map（（值，索引）=>(
{value.body}
))}
);
};
导出默认滚动条；

你需要调整一些事情来做你想做的事情，但这应该为你指明正确的方向

---

注意：若要在codesandbox中查看此工作，请缩小演示窗口，以便可以滚动或向

initialTweets

数组添加更多对象。此外，您还可以在上找到许多示例。

谢谢您的想法！！我能够用这个

constperpage=11使它工作；const[lastPosition，setLastPosition]=useState（每页）；const[allTweets，setAllTweets]=useState（tweets.slice（0，每页））；const[hasMore，setHasmore]=useState（true）；const loadProducts=（）=>{setTimeout（（）=>{setAllTweets（（prev）=>[…prev，…tweets.slice（lastPosition，lastPosition+perPage）]；}，4000）；setLastPosition（lastPosition+perPage）；}