使用 Material IU Grid 在我的 React 应用程序中使用 InfiniteScroll 时遇到一些问题

问题描述

首先，我想承认这是我对 React 的尝试，我正在尝试学习如何使用该库。

我想尝试使用我的一个 API 创建无限滚动的一些图像。

我已将 react-infinite-scroll-component 和“@material-ui”添加到我的项目中。

这是我的 Imagegallery 组件当前的样子：

import React from "react";
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardActions from '@material-ui/core/CardActions';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import FavoriteIcon from '@material-ui/icons/Favorite';
import CommentIcon from '@material-ui/icons/ModeComment';
import Grid from "@material-ui/core/Grid";
import InfiniteScroll from 'react-infinite-scroll-component';

import Images from "./Images";

class Imagegallery extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,isLoaded: false,more: false,images: [],page: 0
        }
    }

    componentDidMount() {
        this.loadMore(this.state.page);
    }

    loadMore(page) {
        fetch('https://localhost/api/Feed.PHP?type=1&start=' + this.state.page)
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,images: result.images,more: true,page: page++
                    });
                },(error) => {
                    this.setState({
                        isLoaded: true,error
                    });
                }
            )
    }

    render() {
        return (
            <Grid container spacing={2}>
                <InfiniteScroll
                    dataLength={ this.state.images.length }
                    hasMore={ this.state.more }
                    next={ this.loadMore( this.state.page ) }
                    height={'100%'}
                    loader={ <div>Loading...</div> }
                >
                {this.state.images.map(item => (
                    <Grid container item xs={6} sm={3} md={2} key={item.ID}>
                        <Card variant="outlined" square style={{width: '100%'}}>
                            <CardHeader
                                avatar={
                                    <Avatar alt={item.username} src={item.profileIMG} />
                                }
                                title={item.username}
                                subheader={item.timeAgo}
                            />
                            <Images src={item.imageURL} alt={item.username} />
                            <CardActions disableSpacing>
                                <IconButton>
                                    <FavoriteIcon />
                                </IconButton>
                                <IconButton>
                                    <CommentIcon />
                                </IconButton>
                            </CardActions>
                        </Card>
                    </Grid>
                ))}
                </InfiniteScroll>
            </Grid>
        );
    }

}

export default Imagegallery;

当我尝试运行该应用程序时，它会无限次调用 API，并且不会更改页码。此外，InfiniteScroll 组件似乎在网格内部存在一些问题，因为该元素未填充父容器的宽度。

对我的代码可能出错的地方或应该在哪些地方进行一些更改有任何想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）