React中useState的setter不生效及图片404问题求助

一、修复图片404错误 #

React项目中，public文件夹是静态资源的根目录，浏览器访问时直接以/开头指向该文件夹。你当前的url路径是本地文件系统的相对路径，导致浏览器从项目根目录（http://localhost:3000）出发找不到资源。

修改memesData.js中所有meme的url字段，去掉本地路径前缀，直接使用/images/[图片名].png：

const memesData = {
success: true,
data: {
    memes: [
        {
            id: "3242213",
            name: "Good Meme 1",
            url: "/images/good_meme_1.png",
            width: 350,
            height: 400,
            box_count: 3,
        },
        {
            id: "3224",
            name: "Good Meme 2",
            url: "/images/good_meme_2.png",
            width: 400,
            height: 300,
            box_count: 2,
        },
        {
            id: "234213",
            name: "Good meme 3",
            url: "/images/good_meme_3.png",
            width: 300,
            height: 400,
            box_count: 3,
        },
        { 
            id: "5672213",
            name: "Good meme 4",
            url: "/images/good_meme_4.png",
            width: 500,
            height: 400,
            box_count: 3,
        },
        {
            id: "456415",
            name: "Good meme 5",
            url: "/images/good_meme_5.png",
            width: 200,
            height: 500,
            box_count: 5,
        },
        {
            id: "38654673",
            name: "Good meme 6",
            url: "/images/good_meme_6.png",
            width: 400,
            height: 350,
            box_count: 7,
        },
        // 移除无效空对象
    ]
}
}
export default memesData;

二、修复setMeme不生效问题 #

1. 移除无效meme对象：原memes数组末尾的空对象{}会导致随机选中时，selectedMeme.url不存在，无法触发有效状态更新，直接移除该空对象即可。
2. 优化状态更新逻辑：连续两次调用setMeme会被React批量合并，第一个更新会被覆盖，直接保留有效状态更新即可。修改getMemeImage函数如下：

const getMemeImage = () => {
  const memesArray = memesData.data.memes;
  const randomNumber = Math.floor(Math.random() * memesArray.length);
  const selectedMeme = memesArray[randomNumber];

  if (selectedMeme?.url) {
    setMeme(selectedMeme.url);
  }
};

三、额外优化建议 #

• 移除代码中未使用的importAll和images变量，减少冗余。
• 初始状态memeImg可设置为默认图片路径，避免页面加载时出现空img标签，同时合并重复的img元素：

const [memeImg, setMeme] = useState("/images/front_meme.png");

// 渲染部分只保留一个img标签
return (
  <div>
    <form className="form">
      <input type="text" className="form--input" />
      <input type="text" className="form--input" />
      <button onClick={getMemeImage} className="form-button">
        Get a new meme image
      </button>
    </form>
    <img className="meme--image" src={memeImg} alt="Meme" />
  </div>
);

内容的提问来源于stack exchange，提问作者Александр Романеев