reactjs - react.js 中的无限滚动不起作用，我正在使用无限滚动组件，它没有从下一页加载图像

Question

我是 React.js 的新手，我正在学习，当我向下滚动时，我试图从闪烁 API 获取更多图像，但它不起作用，

我正在使用材质 UI 和无限滚动组件库。

这是我到目前为止所做的：

import React, { useEffect, useState } from "react";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Grid from "@material-ui/core/Grid";
import { CardMedia } from '@material-ui/core';
import InfiniteScroll from "react-infinite-scroll-component";

export default function Images() {
  var cardStyle = {
    display: "block",
    transitionDuration: "0.3s",
  };
  const [data, setdata] = useState([]);
  const [page, setPage] = useState(1);
  // const [isFetching, setIsFetching] = useState(false);

  async function loadPhotos() {
    const response = await fetch(
      `https://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=1583ada955f818856c5692be7cb57c4e&per_page=12&page=${page}&format=json&nojsoncallback=1`
    );
    const json = await response.json();
    const data = await json.photos;
    const photo = await data.photo;
    setdata(photo);
  }
  useEffect(() => {
    loadPhotos();
  }, []);
  
  function handleLoadMore() {
    setPage(page => page + 1);
  }
  return (
    <InfiniteScroll
      dataLength={data.length}
      next={() => handleLoadMore()}
      hasMore={true}
      loader={<h4>Loading...</h4>}
    >
      <Grid container spacing={2}>
        {data.map((photo, index) => (
          <Grid item xs={4} key={index}>
            <Card>
              <CardContent style={cardStyle}>
                
              <CardMedia
  style={{ height: "300px" }}
  component="img"
  image={`https://live.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}.jpg`}
/>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </InfiniteScroll>
  );
}

这是最新的：

import React, { useEffect, useState } from "react";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Grid from "@material-ui/core/Grid";
import { CardMedia } from "@material-ui/core";
import InfiniteScroll from "react-infinite-scroll-component";

export default function Images() {
  var cardStyle = {
    display: "block",
    transitionDuration: "0.3s"
  };
  const [data, setdata] = useState([]);
  const [page, setPage] = useState(1);
  

  async function loadPhotos() { 
  const response = await fetch(`https://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=1583ada955f818856c5692be7cb57c4e&per_page=12&page=${page}&format=json&nojsoncallback=1`); 
  const json = await response.json(); 
  const datap = await json.photos; 
  const photo = await datap.photo; 
  setdata([...data, photo] ); 
} 
  
  useEffect(() => {
    loadPhotos();
  }, [page]);

  function handleLoadMore() {
    setPage(page => page + 1);
  }
  return (
    <InfiniteScroll
      dataLength={data.length}
      next={() => handleLoadMore()}
      hasMore={true}
      loader={<h4>Loading...</h4>}
    >
      <Grid container spacing={2}>
        {data.map((photo, index) => (
          <Grid item xs={4} key={index}>
            <Card>
              <CardContent style={cardStyle}>
                <CardMedia
                  style={{ height: "300px" }}
                  component="img"
                  image={`https://live.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}.jpg`}
                />
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </InfiniteScroll>
  );
}

标签： reactjsmaterial-uiinfinite-scroll

Answer 1

您的 useEffect 应该将页码作为依赖项，以便再次触发 loadFunction。

useEffect(() => {
 loadPhotos();
}, [page]);