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

【问题标题】：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" alt="cat" />
        ))}
      </div>
    </>
  );
}

【问题讨论】：

您确定 onClick 事件适用于 <RemoveImgButn> 标记吗？
我能够在本地执行此代码并且一切正常。我认为按钮组件会导致问题。调试尝试将其替换为：和
@WilliamWang 你是对的，我没有在另一个文件上添加 onClick 。非常感谢
Bravo @WilliamWang 即使总是小心不要改变状态然后做 setState 会很麻烦
您还有问题吗？我可以看到您批准了答案

标签： javascript arrays reactjs function components

【解决方案1】：

这是因为splice 更改了旧数组

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

您可以改用slice

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

【讨论】：