reactjs - React lazy load won't work inside React perfect scroll bar

Question

I am using react-perfect-scrollbar to show images list. Inside the perfect scroll bar, I am going to lazy load images. But it won't work.

import React, { useState, useCallback, useEffect } from 'react';
import PerfectScrollbar from 'react-perfect-scrollbar';
import useIsMountedRef from 'src/hooks/useIsMountedRef';
import LazyLoad from 'react-lazyload';
import {
  Box,
  Button,
  Link,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  CircularProgress,
  Typography,
  makeStyles
} from '@material-ui/core';
  const isMountedRef = useIsMountedRef();
  const [images, setImages] = useState([]);

  const getImages = useCallback(async () => {
      try {
        setLoading(true);
        const response = await axios.get(`${backendUrl}/images/get/images`);

        if (isMountedRef.current) {
          setImages(response.data.projectImages);
        }
      } catch (err) {
        console.error(err);
      } finally {
        if (isMountedRef.current) {
          setLoading(false);
        }
      }
  }, [isMountedRef]);

          <PerfectScrollbar options={{ suppressScrollX: true }}>
            <List className={classes.list}>
              {images.map((image, i) => (
                <ListItem
                  divider={i < images.length - 1}
                  key={i}
                  className={classes.listItem}
                >
                  <ListItemIcon>
                    <LazyLoad height={90} key={i} overflow>
                      <img
                        src={`${awsS3Url}/${image.Key}`}
                        className={classes.listImage}
                        onClick={() => onSelect(`${awsS3Url}/${image.Key}`)}
                      />
                    </LazyLoad>
                  </ListItemIcon>
                  <ListItemText
                    primary={GetFilename(image.Key)}
                    primaryTypographyProps={{ variant: 'h5' }}
                    secondary={bytesToSize(image.Size)}
                    className={classes.listItemText}
                  />
                    <MoreButton
                      handleArchive={() => handleRemoveOne(image)}
                    />
                </ListItem>
              ))}
            </List>
          </PerfectScrollbar>

Some of images(the first view without scrolling) are showing. When I scroll, the images won't load, only the list contents without images are showing.

What did I code wrong?

question from:https://stackoverflow.com/questions/65947656/react-lazy-load-wont-work-inside-react-perfect-scroll-bar

Answer 1

Waitting for answers