我正在尝试显示我的图像存储后的状态后，我喜欢的图像使用了一个按钮来显示图像

Question

import { useState } from "react";
function Image({ image }) {
const [favourite, setFavourite] = useState([]);
const storeFavourites = () => {
setFavourite((gif) => [...gif, image]);
console.log(favourite);
};
const viewFavourites = () => {
favourite.map((url) => {
<img src={url} />;
});
};
return (
<div>
<img src={image} />
<button onClick={storeFavourites}>Like</button>
<button onClick={viewFavourites}>View Favourites</button>
</div>
);
}
export default Image;

这是一个giphy网站，加载时会生成一个随机gif，并根据搜索结果生成不同的gif。有一个点赞按钮可以点赞图像，它可以在const[收藏夹，设置收藏夹]下将图像存储为收藏夹，但当我单击查看收藏夹时，无法显示任何收藏夹图像。

Answer 1

看起来您正在从组件的返回函数中未使用的函数返回视图，这就是为什么什么都不呈现的原因。

以下是您可以做的事情：

• 将喜爱的图像存储在列表中
• 切换状态值时显示图像

因此，以下是您可以更改的内容：

import { useState } from "react";
function Image({ image }) {
const [favourite, setFavourite] = useState([]);
const [showFavourites, setShowFavourites] = useState(false);
const storeFavourites = () => {
setFavourite((gif) => [...gif, image]);
console.log(favourite);
};
const viewFavourites = () => {
setShowFavourites(!showFavourites);
};
return (
<div>
<img src={image} />
<button onClick={storeFavourites}>Like</button>
<button onClick={viewFavourites}>View Favourites</button>
{showFavourites && favourite.map((url, index) => {
<img src={url} key={index}
})}
</div>
);
}
export default Image;

如果你不想切换视图，而是只想更改一次，你可以将viewFavourites更改为：

const viewFavourites = () => {
setShowFavourites(true);
};