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

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使用&nbsp;const&nbsp;handleRemoveImgClick&nbsp;=&nbsp;()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setImgs((prevImgs)&nbsp;=>&nbsp;prevImgs.slice(1)); &nbsp;&nbsp;};