根据显示的图片改变“喜欢”

Question

我正在制作一个基于美国宇航局的api的应用程序，每天显示一张图片或一段视频。我还创建了一个like按钮，如果有人点击它，它会切换为喜欢图片或将其切换回默认状态。我创建这个应用程序的方式是，用户可以通过material-ui使用日历组件选择日期，当他们选择日期时，它将带来该日期的图片或视频。我正在试图弄清楚如何在每一张图片上添加like按钮，这样如果他们喜欢一张图片，他们可以转到另一天，这样他们就可以喜欢另一张图片。目前，例如，如果我喜欢今天的图片，选择日历并转到昨天的图片，我的点赞按钮仍然处于切换状态。下面是我用来显示图片和其他信息的代码：

​

export default function PictureOfDay(props) {
    const [picture, setPicture] = useState([])
    const {date} = props;
    let selectDate = moment(date, "ddd MMM DD YYYY HH:mm:ss Z-HHmm");
    let formatDate = selectDate.format("YYYY-MM-DD");

    useEffect(() => {
        axios.get(
          `https://api.nasa.gov/planetary/apod?api_key=QQpTYaQHDUvPAyVorMgxfKhQEoSQikBYt5WuFCf6&date=${formatDate}`
        )
        .then((response) => {
            console.log(response.data);
            setPicture(response.data);
        })
        .catch((err) => {
            console.log(err)
        });
    }, [formatDate]);


    return (
      <div className="info">
        {props.fetchingData && (
          <div className="key spinner">
            <Loader type="Puff" color="#800080" height="60" width="60" />
            <p>Loading Data</p>
          </div>
        )}
        <PictureInfo
          date={picture.date}
          title={picture.title}
          image={picture.url}
          media={picture.media_type}
          explanation={picture.explanation}
        />
      </div>
    );
}

​

我在一个不同的组件上也有我的Like按钮逻辑。现在，它还没有附加到图片上，我不确定如何去做：

​

import React, {useState, useEffect} from "react";
import ToggleHearts from "./ToggleHearts"
import {
    Button,
    Typography,
} from "@mui/material";
import {makeStyles} from "@mui/styles";

const useStyles = makeStyles((theme) => ({
  button: {
    ...theme.typography.buttons,
    fontFamily: "Orbitron",
    padding: "0.7em",
    fontSize: "1.5em",
    width: "3.2em",
    height: "3.2em",
    background: theme.palette.primary.mainGradient,
    border: "2px solid pink",
    "&:hover": {
      background: theme.palette.secondary.mainGradient,
    },
  },
}));


const Likes = () => {
    const classes = useStyles();
    const [liked, setLiked] = useState(false)
    const handleChangeHeart = () => {
        setLiked((previousHeart) => {
            return !previousHeart;
        });
    };
   
    useEffect(() => {
        setLiked(JSON.parse(window.localStorage.getItem("liked")));
    }, [])

    useEffect(() => {
        window.localStorage.setItem('liked', liked);
    }, [liked])

    return (
      <Button
        className={classes.button}
        variant="contained"
        onClick={handleChangeHeart}
      >
        <Typography style={{ fontFamily: "Orbitron" }}>
          <ToggleHearts liked={liked}/>
        </Typography>
      </Button>
    );
}

export default Likes

​

Like组件只是附加到我的组件上，该组件呈现页面上的所有内容，下面是代码：

​

export default function PictureInfo(props) {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    const newDate = moment(props.date).format("dddd, MMMM, Do YYYY");
  
    return (
      <React.Fragment>
        <Grid
          container
          direction="row"
          justifyContent="center"
          alignItems="center"
        >
          <Grid item className={classes.formGridItem}>
            <Typography variant="h2">Date: {newDate}</Typography>
          </Grid>
          <Grid item className={classes.formGridItem}>
            <Typography variant="h2">Title of Photo: {props.title}</Typography>
          </Grid>
        </Grid>
        <Grid
          container
          direction="column"
          justifyContent="center"
          alignItems="center"
        >
          <Grid item className={classes.formGridItem}>
            {props.media === "video" ? (
              <iframe
                className={classes.image}
                title="video"
                src={props.image}
                width="800px"
                height="600px"
              ></iframe>
            ) : (
              <img className={classes.image} alt="nasa" src={props.image} />
            )}
          </Grid>
          <Likes />
          <Grid item className={classes.formGridItem} align="center">
            <Button
              className={classes.button}
              variant="contained"
              onClick={handleOpen}
            >
              Click here for more information!
            </Button>
          </Grid>
          <Modal
            open={open}
            onClose={handleClose}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
          >
            <Box sx={style}>
              <Typography
                id="modal-modal-title"
                style={{
                  borderBottom: "1px solid pink",
                  fontFamily: "'Orbitron', sans-serif",
                  marginBottom: "1em",
                  fontSize: "1.4em",
                }}
              >
                Explanation of: {props.title}
              </Typography>
              <Box
                style={{
                  background: "white",
                  border: "1px solid purple",
                  padding: "2em",
                }}
              >
                <Typography
                  id="modal-modal-description"
                  variant="subtitle2"
                  style={{ fontSize: "1.2em" }}
                >
                  {props.explanation}
                </Typography>
              </Box>
            </Box>
          </Modal>
          <footer>
            <Typography
              variant="subtitle2"
              style={{ fontSize: "1rem", color: "black" }}
            >
              &copy;2021 Charlene Johnson
            </Typography>
          </footer>
        </Grid>
      </React.Fragment>
    );
}

​

Answer 1

如果我正确理解你所有的图片或视频帖子，必须在你的数据中有一个唯一的ID代表，你的数据必须看起来像这样例如：

[{ id：‘帖子id’，点赞:idOfUsers，你的数据需要...other }]

所以，现在你可以检查用户的点赞id，并切换你的'like按钮‘，如果用户的ID存在于这个帖子的’like‘数组中，或者将帖子的id存储到'postsWhichwasLiked':idsOfPosts中，然后定义从这个数组中获得ID的帖子被点赞，然后与帖子的ID进行比较