如何从函数组件中的数组中删除图像

Posted 2023-02-22

【中文标题】如何从函数组件中的数组中删除图像

【英文标题】：how to delete an image from an array in function component

【发布时间】：2021-03-12 03:24:15

【问题描述】：

handleRemoveImgButn 应该删除第一个图像，但是当我单击 handleRemoveImgButn 时，图像并没有从 DOM 中删除。我也试过 setImgs((prevImgs) => prevImgs.filter(img => prevImgs.indexOf(img) !== 0，但它不起作用。下面是代码。提前感谢您的帮助。

import React,  useState, useEffect  from "react";
import "./styles.css";
import AddImgButn from "./AddImgButn";
import RemoveImgButn from "./RemoveImgButn";

export default function App() 
  const [imgs, setImgs] = useState([]);

  
  const handleAddImgClick = () => 
    fetchId();
  ;

  const handleRemoveImgClick = () => 
    setImgs((prevImgs) => prevImgs.splice(1));
  ;

  return (
    <>
      <h1>Catt</h1>
      <div>
        <AddImgButn onClick=handleAddImgClick />
        <RemoveImgButn onClick=handleRemoveImgClick />
      </div>
      <div>
        imgs.map((img, i) => (
          <img key=i src=img className="cat"  />
        ))
      </div>
    </>
  );

【问题讨论】：

您确定 onClick 事件适用于 <RemoveImgButn> 标记吗？

我能够在本地执行此代码并且一切正常。我认为按钮组件会导致问题。调试尝试将其替换为： add 和 remove

@WilliamWang 你是对的，我没有在另一个文件上添加 onClick 。非常感谢

Bravo @WilliamWang 即使总是小心不要改变状态然后做 setState 会很麻烦

您还有问题吗？我可以看到您批准了答案

【参考方案1】：

这是因为splice 更改了旧数组

然后useEffect 没有检测到它和新的之间的变化

您可以改用slice

 const handleRemoveImgClick = () => 
    setImgs((prevImgs) => prevImgs.slice(1));
  ;