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

Question

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" alt="cat" />        ))}      </div>    </>  );}

Answer 1

发生这种情况是因为splice更改了旧数组

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

你可以slice使用

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