使用 react dropzone 显示文件名

Question

我正在尝试显示我将上传的文件列表。我使用 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>
  );
}

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

Answer 1

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

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

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

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

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

看这里：

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

使用 react dropzone 显示文件名

Display file name using react dropzone

reactjs

react-dropzone