Javascript 在使用react路由器dom时懒散地加载图像

我正在使用react router dom，我试图在我的“gallery”页面中进行懒散加载，但当我访问gallery页面时，所有图像都已加载，懒散加载无法正常工作。我最初在没有使用dom的情况下进行了尝试，效果很好。所以我觉得问题出在路线上

/App.js

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Gallery from "./Gallery";
import Home from "./Home";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/gallery" render={() => <Gallery />} />
        <Route path="/" render={() => <Home />} />
      </Switch>
    </Router>
  );
}
export default App;

import React from "react";
import "./App.css";

import Amplify, { Auth, Storage } from "aws-amplify";
import config from "./aws-exports";
import LazyLoad from "react-lazyload";

Amplify.configure(config);
const getCreds = async () => {
  let creds = await Auth.currentCredentials(); 
};
getCreds();

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: []
    };
  }
  async componentDidMount() {
    await Storage.list("")
      .then(res => {
        res.shift(); //remove the first element of the array
        res.map(imgObject => {
          let lnk =
            "LINK IM FETCHING FROM" + imgObject.key;
          this.setState(prevState => ({
            images: [...prevState.images, lnk]
          }));

          return imgObject;
        });
      })
      .catch(err => console.log(err));
  }

  render() {
    const items = this.state.images.map(imgLink => (
      <LazyLoad height={200} key={Math.random()}>
        <img width={1080} src={imgLink} alt="img" />
      </LazyLoad>
    ));
    return <div className="App">{items}</div>;
  }
}

export default App;

当我使用与

/Gallery.js

相同的代码删除

和

时，Lazyloading会按预期工作

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Gallery from "./Gallery";
import Home from "./Home";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/gallery" render={() => <Gallery />} />
        <Route path="/" render={() => <Home />} />
      </Switch>
    </Router>
  );
}
export default App;

import React from "react";
import "./App.css";

import Amplify, { Auth, Storage } from "aws-amplify";
import config from "./aws-exports";
import LazyLoad from "react-lazyload";

Amplify.configure(config);
const getCreds = async () => {
  let creds = await Auth.currentCredentials(); 
};
getCreds();

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: []
    };
  }
  async componentDidMount() {
    await Storage.list("")
      .then(res => {
        res.shift(); //remove the first element of the array
        res.map(imgObject => {
          let lnk =
            "LINK IM FETCHING FROM" + imgObject.key;
          this.setState(prevState => ({
            images: [...prevState.images, lnk]
          }));

          return imgObject;
        });
      })
      .catch(err => console.log(err));
  }

  render() {
    const items = this.state.images.map(imgLink => (
      <LazyLoad height={200} key={Math.random()}>
        <img width={1080} src={imgLink} alt="img" />
      </LazyLoad>
    ));
    return <div className="App">{items}</div>;
  }
}

export default App;