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

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));
  };