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

Question

我尝试使用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 (

这里是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
                dataSource={dataCard}
                renderItem={(item) => (
                  <List.Item>
                    <Row justify="space-between">
                      <Col>
                        <CardTrainingEvent {...item} />
                      </Col>
                    </Row>
                  </List.Item>
                )}
              />
            </InfiniteScroll>
 );
};