从数组中删除对象无法正常工作 - React-dropzone

问题描述

我正在使用 react-dropzone 上传一些文件并使用 react-bootstrap-table-next 显示上传的文件元数据。我尝试从文件列表中删除一个对象，如果我从列表中随机删除文件，它无法正常工作。请指教。

这是我的代码和框链接：link

这是我的代码：

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;

图片链接：Images link

截图：

解决方法

更改后问题似乎解决了：

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 }));
  };