在代码块前面,已经使用useState声明保存过
const [fileList, setFileList] = useState([]);
const [imgList, setImgList] = useState([]);
在进行删除操作的时候,直接给imgArr 赋值 imgList,然后通过splice
进行删除,通过控制台返回的数据,得知imgList
已经被删除指定的条目,但是在图片/文件的容器里,还是在显示这个图片/文件,只有重新上传新的图片/文件之后,原本被删除的图片/文件才会消失。
// 删除文件
const deleteFile = (index, item ,type) => {
if(type == 'img'){
let imgArr = imgList
imgArr.splice(index, 1)
setImgList(imgArr)
}else{
console.log(type, item, 'index');
let fileArr = fileList.concat([])
fileArr.splice(index, 1)
setFileList(fileArr)
}
}
解决办法,因为let imgArr = imgList
相当于直接操作imgList
而代码不能直接useState
中的数据,所以可以在给let imgArr = imgList
赋值时,加入.concat([])
一个空数组,这样就相当于不是直接操作useState
中的数据了。
代码如下:
const deleteFile = (index, item ,type) => {
if(type == 'img'){
let imgArr = imgList.concat([])
imgArr.splice(index, 1)
setImgList(imgArr)
}else{
console.log(type, item, 'index');
let fileArr = fileList.concat([])
fileArr.splice(index, 1)
setFileList(fileArr)
}
}