如何解决从数组中删除对象无法正常工作 - React-dropzone
我正在使用 react-dropzone 上传一些文件并使用 react-bootstrap-table-next 显示上传的文件元数据。我尝试从文件列表中删除一个对象,如果我从列表中随机删除文件,它无法正常工作。请指教。
这是我的代码:
import "./styles.css";
import { Box } from "reflexBox/styled-components";
import { isEmpty,reject } from "lodash";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import React,{ useState,useCallback } from "react";
import { useDropzone } from "react-dropzone";
import { IconNames } from "@blueprintjs/icons";
import { NonIdealState,Text,Button,Colors,Icon } from "@blueprintjs/core";
const getFormattedFileSize = (bytes,decimals = 2) => {
if (bytes === 0) return "0 Bytes";
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k,i)).toFixed(dm)) + " " + sizes[i];
};
function Basic(props) {
const [myFiles,setMyFiles] = useState([]);
const onDrop = useCallback(
(acceptedFiles) => {
const files = [...myFiles,...acceptedFiles];
const filesWithId = files.map((item,index) => {
return {
id: index + 1,lastModified: item.lastModified,lastModifiedDate: item.lastModifiedDate,name: item.name,size: item.size,type: item.type,webkitRelativePath: item.webkitRelativePath
};
});
setMyFiles(filesWithId);
},[myFiles]
);
const { getRootProps,getInputProps } = useDropzone({
accept: "image/jpeg",onDrop
});
const removeFile = (file) => {
console.log("file",file);
const newFiles = [...myFiles];
setMyFiles(reject(newFiles,{ id: file.id }));
};
const fileSizeformatter = (cell) => {
return <span>{getFormattedFileSize(cell)}</span>;
};
const fileNameFormatter = (cell) => {
return <Text ellipsize>{cell}</Text>;
};
const fileDeleteFormatter = (cell,row) => {
return (
<Button
minimal
icon={<Icon icon={IconNames.TRASH} color={Colors.RED1} />}
onClick={() => removeFile(row)}
/>
);
};
const uploadedFilesColumns = [
{
datafield: "name",text: "File Name",formatter: fileNameFormatter,sort: true
},{
datafield: "size",text: "File Size",formatter: fileSizeformatter,{
datafield: "delete",text: "Delete",formatter: fileDeleteFormatter
}
];
console.log(myFiles);
return (
<section className="container">
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here,or click to select files</p>
</div>
<Box className="border p-3">
<Box
{...getRootProps({ className: "dropzone" })}
style={{ cursor: "pointer" }}
>
<input {...getInputProps()} accept=".jpg" />
<NonIdealState
icon={"import"}
title="Drag 'n' drop some files here,or click to select files"
/>
</Box>
{!isEmpty(myFiles) && (
<Box className="pt-1">
<BootstrapTable
bootstrap4
keyField="id"
data={myFiles}
columns={uploadedFilesColumns}
pagination={paginationFactory({ showTotal: true })}
/>
</Box>
)}
</Box>
</section>
);
}
export default Basic;
解决方法
更改后问题似乎解决了:
const removeFile = (file) => {
console.log("file",file);
const newFiles = [...myFiles];
setMyFiles(reject(newFiles,{ id: file.id }));
};
通过直接在 setMyFiles()
中调用旧状态值:
const removeFile = (file) => {
console.log("file",file);
setMyFiles((oldStateVal) => reject(oldStateVal,{ id: file.id }));
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。