Javascript 单击react.js从文件数组中删除文件

Javascript 单击react.js从文件数组中删除文件,javascript,arrays,reactjs,state,Javascript,Arrays,Reactjs,State,我正在尝试创建一个函数,该函数允许我使用索引onclick从文件数组中删除文件 **输入:**要上载的文件存储在使用挂钩的状态下 **输出:**要上载的文件存储在减去已删除文件的状态下 这是我到目前为止所做的,我想知道我是否在正确的轨道上,或者是否有更好的方法来做这件事 // remove document from uploadFiles array const removeFile = index => { // take an array of files

我正在尝试创建一个函数,该函数允许我使用索引onclick从文件数组中删除文件

**输入:**要上载的文件存储在使用挂钩的状态下

**输出:**要上载的文件存储在减去已删除文件的状态下

这是我到目前为止所做的,我想知道我是否在正确的轨道上,或者是否有更好的方法来做这件事

// remove document from uploadFiles array
      const removeFile = index => {
        // take an array of files and select a file at a given index
        // remove a file at a selected index
        // reassign all the indexs
        const selectFile = index;
        setFilesToUpload(filesToUpload.filter(file => file.selectFile[index] !== selectFile));
      };

      return (
        <div className={uploadStyles.fileContainer} key={uuid()}>
          <div className={uploadStyles.fileTitle}>
            <p>Document {(index += 1)}</p>
            <SquareButton
              label={"remove file"}
              icon={"x-mark"}
              small={true}
              name={file.selectFile}
              onClick={() => removeFile(index)}
            />
          </div>
          <p className={uploadStyles.filePath}>{file.path}</p>
          <p className={uploadStyles.fileTS}>
            {file.type}
            {"   "}|{"   "}
            {formatBytes()}
          </p>
          <div className={uploadStyles.progressLine} />
        </div>
      );
    });
  };
//从uploadFiles数组中删除文档
const removeFile=index=>{
//获取一个文件数组,并在给定索引处选择一个文件
//删除选定索引处的文件
//重新分配所有索引
const selectFile=索引;
setFilesToUpload(filesToUpload.filter(file=>file.selectFile[index]!==selectFile));
};
返回(
文件{(索引+=1)}

removeFile(索引)} />

{file.path}

{file.type} {" "}|{" "} {formatBytes()}

); }); };
我相信您可以使用
拼接

之前:

setFilesToUpload(filesToUpload.filter(file=>file.selectFile[index]!==selectFile))

之后:

setFilesToUpload(filesToUpload.splice(index,1))

第二个参数表示要删除的元素数量

splice()
方法通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容


我相信您可以使用
splice

之前:

setFilesToUpload(filesToUpload.filter(file=>file.selectFile[index]!==selectFile))

之后:

setFilesToUpload(filesToUpload.splice(index,1))

第二个参数表示要删除的元素数量

splice()
方法通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容


在filter方法中,第二个参数是
index
,利用它来简化

const removeFile = (index) => {
  setFilesToUpload(filesToUpload.filter((_, i) => i !== index));
};

在filter方法中,第二个参数是
index
,利用它来简化

const removeFile = (index) => {
  setFilesToUpload(filesToUpload.filter((_, i) => i !== index));
};

让我知道它是如何运行的:)但是,如果我尝试从数组中删除一个文件,如果有多个文件,它将删除该文件的每个索引,以及让我知道它是如何运行的:)但是,如果我尝试从数组中删除一个文件,如果有多个文件,它将删除该文件的每个索引。这个解决方案如何工作我是否处理数组中只有一项需要过滤掉的情况。此解决方案有效。但是,我如何处理数组中只有一项需要过滤掉的情况。