小编Dex*_*rya的帖子

如何限制react-infinite-scroll中显示的数据

我尝试使用react-infinite-scroll-component来显示一些数据卡,但我不明白如何仅在视图中显示一些数据,在这种情况下我显示所有数据,如何解决这个问题

这是我的代码

  const AllTrainingEvent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const nextData = () => {
    if (loading) return;
    setLoading(true);

    setTimeout(() => {
      const newData = dataCard.slice(0, data.length + 1);
      setData([...dataCard, ...newData]);
      setLoading(false);
    }, 1000);
  };

  return (
Run Code Online (Sandbox Code Playgroud)

这里是react-infinite-scroll的使用

        <InfiniteScroll
                  dataLength={data.length}
                  hasMore={data.length < 5}
                  next={nextData}
                  loader={<h4 style={{ textAlign: "center" }}>Loading...</h4>}
                  endMessage={
                    <p style={{ textAlign: "center" }}>
                      <Divider>Yay! You have seen it all</Divider>
                    </p>
                  }
                  style={{
                    maxHeight: 350,
                    overflow: "inherit",
                  }}
                >
    
    
              <List …
Run Code Online (Sandbox Code Playgroud)

reactjs react-infinite-scroll-component

5
推荐指数
0
解决办法
307
查看次数