Javascript 在我喜欢图像使用按钮显示图像后，我试图在存储状态后显示我的图像

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;

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;

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

Javascript相关问答推荐

追踪执行顺序

在具有焦点和上下文的d3多线图表中，如何将上下文的刷新限制在特定日期？

如何在JavaScript中通过一次单击即可举办多个活动

React存档iframe点击行为

根据总价格对航班优惠数组进行排序并检索前五个结果- Angular HTTP请求

vscode扩展-webView Panel按钮不起任何作用

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

在服务器上放置了Create Reaction App Build之后的空白页面

在我的html表单中的用户输入没有被传送到我的google表单中

当Redux提供程序访问Reduxstore 时，可以安全地从Redux提供程序外部调用钩子？

Websocket错误—有一个或多个保留位开启：reserved1 = 1，reserved2 = 0，reserved3 = 0

更新动态数据中对象或数组中的所有值字符串

如何在Node.js中排除导出的JS文件

NG/Express API路由处理程序停止工作

邮箱密码重置链接不适用于已部署的React应用程序

将范围 Select 器添加到HighChart面积图

Node.js错误： node 不可单击或不是元素

我正在试着做一个TicTacToe Ai来和我玩.但是，我试着在第一个方块被点击时出现一个X，然后在第二个方块之后出现一个O

如何使用抽屉屏幕及其子屏幕/组件的上下文？

如何使用[ModelJSON，ArrayBuffer]调用tf.loadGraphModelSync