反应功能组件懒负荷实现

Question

我们有一个简单的React应用程序，其中父组件（ShopItem）在循环中呈现多个儿童组件（评论）。

const ShopItem = ({ item }) => {
    const [comments, setComments] = useState(item.comments)

    return (
        <div>
            <div className="item_title">
                item.title
            </div>
            <div className="item_comments">
                {comments.map((comment) => {
                    return (
                        <CommentCard
                            commentId={commentId}
                        />
                    )
                })}
            </div>
        </div>
    )
}

然后，注释卡组件在内部调用API以获取注释信息，然后在屏幕上渲染。这是我们在ShopItem Prop中收到的物品的结构，

{
    title: "Bucket"
    price: 90
    comments: [
        8993,
        8992,
        8991,
        8990,
        ..
        ..
        ..
    ]
}

我们希望将懒惰加载用于评论部分。例如，在启动时，应仅渲染前5个评论卡，并且当用户开始滚动时，应渲染下5个评论卡，依此类推。由于我们已经有一个在项目上发布的所有注释的列表（以数组的形式），因此我们不需要从服务器中获取评论ID，因此我们只需要管理已经收到的作为道具的列表即可。

我们试图使用React。懒惰和反应。悬浮，但这些并不能满足我们的要求。我不是在寻找一个功能齐全的解决方案，我在这里寻找一种方法。