FixedSizeGrid 未触发 react-window 的 InfiniteLoader 内的 loadmoreitems

问：

我是 react js 的新手，我希望使用 react-window 创建一个产品列表。在使用 Infiniteloader 执行 fixedsize 列表时，loadMoreItems 工作正常，我能够进行 API 调用并将新数据集附加到 productList。但是我希望每行使用 3 个产品进行网格视图，同时使用 InfinitLoader 中的 FixedSizeGrid 执行此操作，我无法在滚动列表时进行 API 调用。有没有解决方案或替代方法？

import React, { useEffect, useState } from "react";
import Image from 'next/image'
import { FixedSizeList as List, FixedSizeGrid as Grid  } from 'react-window'
import InfiniteLoader from 'react-window-infinite-loader'
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import axios from 'axios';
import { Box, Stack, Typography } from '@mui/material';

// Custom imports
import { poppinsBold } from '../../shared/appfonts';

// Variables used for infinite virtualized list
const PAGE_SIZE = 20;
const TOTAL_PRODUCTS = 1000;
const LOAD_THRESHOLD = 200;
const itemSize = 200; // Fixed item size for 3 items per row
const columnCount = 3; // Number of columns (items per row)

const ProductList = () => {
    const [products, setProducts] = useState([]); // State to maintain product list data
    const [isLoading, setIsLoading] = useState(false); // State to maintain loading state while fetching products from the server
    const [currentPage, setCurrentPage] = useState(1); // State to maintain the current page record

    // Custom Title MUI component for UI
    const TitleTypography = styled(Typography)({
        fontFamily: poppinsBold.style.fontFamily,
        color: 'black',
    });

    // Custom Medium MUI component for UI
    const MediumTypography = styled(Typography)({
        fontFamily: poppinsBold.style.fontFamily,
        color: 'black',
    });

    // Function used to fetch products from the server
    const fetchProducts = async (pageNumber = currentPage) => {
        setIsLoading(true);
        try {
            const response = await axios.get(
                `http://localhost:5000/products?_page=${pageNumber}&_limit=${PAGE_SIZE}`
            );
            const newProducts = response.data;
            setProducts([...products, ...newProducts]);
            setCurrentPage(currentPage + 1);
        } catch (error) {
            console.error('Error fetching products:', error);
        } finally {
            setIsLoading(false);
        }
    };

    // Function used to load more product items to the infinite list
    const loadMoreItems = () => {
        console.log('load more items called')
        if (!isLoading) {
            console.log("currentPage", currentPage);
            if (products.length < TOTAL_PRODUCTS) {
                fetchProducts(currentPage);
            }
        }
    };

    useEffect(() => {
        fetchProducts();
    }, []); // Fetch initial data

    const renderItem = ({ columnIndex, rowIndex, style }) => {
        const index = rowIndex * columnCount + columnIndex;
        const product = products[index];

        return (
            <div style={style} key={product?.id}>
                <Paper sx={{ m: 3 }} elevation={3}>
                    <Stack display={'flex'} direction={'row'}>
                        <Image
                            width={120}
                            height={150}
                            src={
                                'https://images.pexels.com/photos/10863290/pexels-photo-10863290.jpeg?auto=compress&cs=tinysrgb&w=600'
                            }
                            alt="Alternate image"
                            style={{ objectFit: 'fill' }}
                        />
                        <Box
                            display={'flex'}
                            alignItems={'center'}
                            flexDirection={'column'}
                            justifyContent={'center'}
                            width={'100%'}
                        >
                            <TitleTypography>{product?.name}</TitleTypography>
                            <MediumTypography>${product?.price}</MediumTypography>
                        </Box>
                    </Stack>
                </Paper>
            </div>
        );
    };

    return (
        <Box>
            <InfiniteLoader
                isItemLoaded={() => isLoading}
                itemCount={TOTAL_PRODUCTS}
                loadMoreItems={loadMoreItems}
            >
                {({ onItemsRendered, ref }) => (
                    <Grid
                        height={window.innerHeight}
                        width={window.innerWidth}
                        columnCount={columnCount}
                        columnWidth={window.innerWidth / columnCount}
                        rowCount={Math.ceil(products.length / columnCount)}
                        rowHeight={200}
                        onItemsRendered={onItemsRendered}
                        ref={ref}
                    >
                        {renderItem}
                    </Grid>
                )}
            </InfiniteLoader>
        </Box>
    )
}

export default ProductList;