为什么我的 React 组件没有更新图片库？

Question

您好，我是 React 新手，我想知道为什么单击日期选项卡时我的图片库没有更新。我是故意的，一旦你点击选项卡，它就会“弹出”数组的一个对象，但它不会实时更新。只有更改 window 的大小才能看到结果。有什么办法可以解决吗？

galleryPage.jsx

import React from 'react';
import Box from '@material-ui/core/Box';
import ImageGrid from '../components/image-grid/ImageGrid';
import styled from 'styled-components';
import Text from '../components/text/Text';
import { withStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Grid from '@material-ui/core/Grid';

const photos = [
  {
    src: 'https://source.unsplash.com/2ShvY8Lf6l0/800x599',
    width: 4,
    height: 3,
    date: '2020',
  },
  {
    src: 'https://source.unsplash.com/Dm-qxdynoEc/800x799',
    width: 1,
    height: 1,
    date: '2020',
  },
  {
    src: 'https://source.unsplash.com/qDkso9nvCg0/600x799',
    width: 3,
    height: 4,
    date: '2018',
  },
  {
    src: 'https://source.unsplash.com/iecJiKe_RNg/600x799',
    width: 3,
    height: 4,
    date: '2021',
  },
];

const GalleryPage = () => {
  const marginSpaceY = 30;
  const currentYear = new Date().getFullYear().toString();
  const [filterDate, setFilterDate] = React.useState(currentYear);
 
const handleChangeDate = (event, newDate) => {
    setFilterDate(newDate);
    console.log(newDate);

    photos.pop();
    
  };
 
  return (
    <div>
        {/* Year */}
        <Grid container justify="center" alignItems="flex-start">
          <StyledTabs
            variant="scrollable"
            value={filterDate}
            onChange={handleChangeDate}
            aria-label="styled tabs example"
          >
            <StyledTab label="2019" value="2019" />
            <StyledTab label="2020" value="2020" />
            <StyledTab label="2021" value="2021" />
          </StyledTabs>
        </Grid>
      </Box>


      <Box mb={marginSpaceY}>
        <ImageGrid photos={photos}></ImageGrid>
      </Box>
    </div>
  );
};

export default GalleryPage;

imageGrid.jsx

import React from 'react';
import { SRLWrapper } from 'simple-react-lightbox';
import Gallery from 'react-photo-gallery';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';

const options = {
  settings: {
    slideTransitionSpeed: 0.1,
    disablePanzoom: true,
    showThumbnailsButton: true,
  },
  buttons: {
    backgroundColor: 'rgba(30,30,36,0.3)',
    showThumbnailsButton: false,
  },
};

const ImageGrid = (props) => {
  return (
    <div>
      <Grid container justify="center" alignItems="flex-start">
        <Box width="90%" justifyContent="center" alignItems="center">
          <SRLWrapper options={options}>
            <Gallery photos={props.photos}></Gallery>
          </SRLWrapper>
        </Box>
      </Grid>
    </div>
  );
};

export default ImageGrid;

Answer 1

问题是您总是渲染 photos 数组中的所有照片。您应该按活动年份过滤照片，以便 React 在每次状态更新（年份更改）时重新呈现。

const filteredPhotos = photos.filter((photo) => photo.date === filterDate)

现在将此变量传递给 ImageGrid 组件

<ImageGrid photos={filteredPhotos}></ImageGrid>

CodeSandbox

这与您的问题无关，但为了清楚起见，我建议将 filterDate 重命名为 filterYear。

为什么我的 React 组件没有更新图片库？

Why my react component isn't updating the image gallery?

javascript

state

render

reactjs

react-hooks