删除处于状态的数组后，我的组件没有更新

Question

我试图使多个文件上传，并有预览。如果图像被点击，它将从数组中删除。

我已经可以从数组中删除文件，但问题是组件在我删除数据后没有更新。

这里是CodeSandbox

下面是我的代码:

import { useState } from "react";
import "./Upload.css";
const Upload = () => {
const [file, setFile] = useState([]);
console.log(file);
const handleUpload = (e) => {
setFile([...file, ...e.target.files]);
};
const deleteFile = (index) => {
if (file !== []) {
var newArr = file;
newArr.splice(index, 1);
console.log(newArr, "after");
setFile(newArr);
}
};
return (
<div>
<input type="file" onChange={(e) => handleUpload(e)} multiple />
<br />
<br />
{file !== [] &&
file.map((data, index) => (
<div key={index}>
<img
src={URL.createObjectURL(data)}
alt="file-img"
className="image-preview"
onClick={() => deleteFile(index)}
/>
</div>
))}
</div>
);
};
export default Upload;

点击后图像没有删除。但是数组中的文件会被删除。谢谢之前!

Answer 1

您从状态中删除项目的方式错误。您需要返回new Array而不是直接改变状态。你可以这样使用过滤器:

const deleteFile = (index) => {
if (file !== []) {
setFile((preFile) => preFile.filter((item, i) => i !== index));
}
};

Answer 2

可以过滤掉文件数组

const deleteFile = (index) => {
if (file !== []) {
setFile(file.filter((el, i) => i !== index));
}
};