Отображение имени файла с помощью React dropzone - PullRequest
Новая
       74

Отображение имени файла с помощью React dropzone

0 голосов
/ 10 июля 2020

Я пытаюсь отобразить список файлов, которые я загружу. Я использовал библиотеку response-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

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Проверьте это, я добавил комментарий ниже и исправил вашу проблему: 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>
  );
}
1 голос
/ 10 июля 2020

Это потому, что вы неправильно используете перехватчик useState. Если вы хотите связать что-то с состоянием, вы должны использовать функциональный параметр setFiles. Вы можете сделать это следующим образом: 

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

В противном случае вы могли бы сделать следующее: 

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

Хук useCallback принимает состояние файлов как зависимость, и если этот массив изменяется, метод получает не извлекается из кеша :) Но я бы предпочел первый пример, потому что функция всегда должна исправлять состояние!

Взгляните сюда:

...