时间戳

首页 > 解决方案 > 在反应中更改地图中一项的状态

reactjs - 在反应中更改地图中一项的状态

问题描述

我有一个页面显示使用 map 方法通过 api 调用获取的图像。现在我想做的是FavoriteIcon通过单击来切换喜欢或不喜欢的状态。

当我尝试使用useState钩子实现它时，如果我单击FavoriteIcon单个图像中的 ，所有图像都设置为相同的状态。我只希望单击的图像更改其状态。

import React, { useState, useEffect } from "react";

import FavoriteIcon from "@material-ui/icons/Favorite";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";

// services
import medias from "../../services/mediaServices";

function Favorites({ fetchUrl, catagory }) {
  const classes = useStyles();
  const [images, setImages] = useState([{}]);
  
  const [favIcon, setFavIcon] = useState();

 

  useEffect(() => {
    async function getData() {
        const request = await medias.getMedias(fetchUrl);
        setImages(request.data.message);  
    }
    getData();
  }, [fetchUrl, enqueueSnackbar, closeSnackbar]);

 
  return (
    <div className={classes.favorites}>
      <div className={classes.favorites__items}>
          {images &&
            images.map(image => {
              return (
                  <div
                    elevation={3}
                    className={classes.favorites__posters}
                    style={
                      {
                        //   border: "2px solid black"
                      }
                    }
                  >
                    <img
                      key={image.id}
                      src={image.thumbnailUrl}
                      alt={image.title}
                    />
                    {favIcon ? (
                      <FavoriteIcon onClick={() => setFavIcon(false)} />
                    ) : (
                      <FavoriteBorderIcon onClick={() => setFavIcon(true)} />
                    )}
                  </div>      
              );
            })}
      </div>
    </div>
  );
}

export default Favorites;

标签： reactjs

解决方案

在不将其分解为更多组件的情况下，您的favIcon状态需要包含所有图标的状态。它应该用类似的东西初始化

images.map(image => {id: image.id, state: false})

然后你可以改变你onClick的只是更新状态的相关部分

setFavIcon([...favIcon].map(x => {if(x.id === image.id) {x.state = !x.state}; return x}))

推荐阅读