为什么当我单击单个删除按钮时，除了一个之外的所有图像都被删除？答案

【问题标题】：Why are all the images being deleted except for one when I click single delete button?为什么当我单击单个删除按钮时，除了一个之外的所有图像都被删除？
【发布时间】：2021-05-17 11:27:09
【问题描述】：

我列出了所有图像以及每个图像侧面的删除按钮以删除该图像，但是当我单击任何删除按钮时，除了一个之外，所有图像都会被删除。当我在 arrayRemove() 函数中删除后 console.log() 新数组时，它会打印正确的数组。我正在使用反应框架。

{(imageURLs.length !== 0) && (
                  <div>
                    Images
                      {imageURLs.map((img, i) => (
                        <div key={img}>
                            {i + 1 + "."}
                            <img
                              src={img}
                              alt="Images Preview"
                              className="mt-3 mr-2"
                              width="75"
                              height="75"
                              style={{marginLeft: 15}}
                            />

                            <IconButton aria-label="delete"
                                style={{marginLeft: 25}}
                                onClick={() => {arrayRemove(imageURLs, i)}}>
                                <DeleteIcon />
                            </IconButton>
                        </div>
                      ))}
                  </div>
              )
            }

这是arrayRemove函数-

function arrayRemove(arr, i) {
    if(arr.length === 1) {
        alert("You need to keep atleast one image for your product!")
        return;
    }
    else {
        arr.splice(i, 1);
        setImageURLs((oldArray) => [arr]);
        console.log(imageURLs);
    }
}

【问题讨论】：

不会是setImageURLs(arr)吗？不过你不应该改变数组，在修改它之前用.slice()复制它。
setImageURLs(arr) 不会在删除图像时更新 UI。即使在使用 .slice() 复制后也存在同样的问题！

标签： javascript reactjs

【解决方案1】：

尝试使用filter 而不是splice：

function arrayRemove(arr, i) {
  if (arr.length === 1) {
    alert("You need to keep at least one image for your product!");
  } else {
    const filtered = arr.filter((img, idx) => idx !== i);
    setImageURLs(filtered);
  }
}

正如@Patrick Roberts 所提到的，使用filter 将避免改变原始数组。这是一个带有简单工作示例的沙箱：https://codesandbox.io/s/elated-easley-7x94b

【讨论】：

作为记录，这在功能上等同于const filtered = arr.slice(); filtered.splice(i, 1); setImageURLs(filtered);，正如我在评论中所建议的那样。我想我不是很清楚，因为他们似乎把我的建议弄错了。
感谢@PatrickRoberts 和 Eric 的帮助 :)。 PS - 我理解你的建议帕特里克但不知何故它对我不起作用......它仍在删除所有图像，除了使用拼接时的一个，使用过滤器时不会发生。