使用 react dropzone 显示文件名答案

【问题标题】：Display file name using react dropzone使用 react dropzone 显示文件名
【发布时间】：2020-07-10 06:48:48
【问题描述】：

我正在尝试显示我将上传的文件列表。我使用 react-dropzone 库来拖放文件。删除的文件没有使用 useState 钩子存储在文件数组中

import React, {  useState, Fragment } from "react";
import { useDropzone } from "react-dropzone";
import "./App.css";

export default function App() {
  const [files, setFiles] = useState([]);

  const onDrop = acceptedFiles => {
    setFiles(
      acceptedFiles.map(file => {
        
        return files.concat(file);
      })
    );
  };
  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <Fragment>
      <div {...getRootProps()} className="input-area">
        {
          <div>
            <p className="input-text">Drop the files here ...</p>
          </div>
        }
        <input {...getInputProps()} />
      </div>
      <div>
        Files :
        {
          files.map(file => <div>{file.path}   </div>)
        }
      </div>
    </Fragment>
  );
}

这是相同的代码框链接 https://codesandbox.io/s/hungry-margulis-ehgg2?file=/src/App.js:0-801

【问题讨论】：

标签： reactjs react-dropzone

【解决方案1】：

那是因为你使用了 useState Hook 错误。如果你想将某些东西连接到一个状态，你应该使用 setFiles 的功能参数。你可以这样做：

const onDrop = acceptedFiles => {
    setFiles(files => files.concat(...acceptedFiles));
};

否则您可以执行以下操作：

const onDrop = useCallback(acceptedFiles => {
    setFiles(files.concat(...acceptedFiles));
}, [files]);

useCallback Hook 将文件状态作为依赖项，如果该数组发生更改，该方法将从缓存中失效:) 但我更喜欢第一个例子，因为你总是必须纠正状态的功能！

看这里：

【讨论】：

【解决方案2】：

检查一下，我在下面添加了评论并解决了您的问题： https://codesandbox.io/s/dry-wave-457ee?file=/src/App.js

import React, { useCallback, useState, Fragment } from "react";
import { useDropzone } from "react-dropzone";
import "./App.css";

export default function App() {
  const [files, setFiles] = useState([]);

  const onDrop = acceptedFiles => {
    console.log(acceptedFiles);
    const allFiles = [...files, ...acceptedFiles]; //save all files here 
    console.log(allFiles);
    setFiles(allFiles);
  };
  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <Fragment>
      <div {...getRootProps()} className="input-area">
        {
          <div>
            <p className="input-text">Drop the files here ...</p>
            <p> drop next file here </p>
          </div>
        }
        <input {...getInputProps()} />
      </div>
      <div>
        Files :
        {files.map(file => (
          <li>{file.path}</li>
        ))}
      </div>
    </Fragment>
  );
}

【讨论】：