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

Question

嗨，我是新来的反应，我想知道为什么我的图片库在单击日期选项卡时没有更新。 我故意做出这样一个事实，即一旦您单击选项卡，它就会“弹出”阵列的一个 object，但它不会实时更新。 只有更改 window 的大小才能看到结果。 有什么可以解决的吗？

画廊页面.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 在每次 state 更新（年份变化）时重新渲染。

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

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

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

代码沙盒

---

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