Как использовать Async Await в «onDrop» «Reaction-Dropzone»? (Ошибка синтаксического анализа: нельзя использовать ключевое слово «await» вне функции Async) - PullRequest
Новая
       51

Как использовать Async Await в «onDrop» «Reaction-Dropzone»? (Ошибка синтаксического анализа: нельзя использовать ключевое слово «await» вне функции Async)

1 голос
/ 21 октября 2019

Я использую «Reaction-Dropzone» для сброса файлов: 

import React from "react";
import { useDropzone } from "react-dropzone";

const DropzoneUpload = ({ onDrop, accept }) => {
  // Initializing useDropzone hooks with options
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept
  });


  return (
    <div {...getRootProps()}>
      <input className="dropzone-input" {...getInputProps()} />
      <div className="text-center">
        {isDragActive ? (
          <p className="dropzone-content">Release to drop the files here</p>
        ) : (
          <p className="dropzone-content">
            Drag 'n' drop some files here, or click to select files
          </p>
        )}
      </div>
    </div>
  );
};

export default DropzoneUpload;

И он используется в App.js следующим образом: 

<DropzoneUpload
        onDrop={onDrop}
        accept={
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        }
      />

Где функция onDrop:

const onDrop = useCallback(async acceptedFiles => {
    // this callback will be called after files get dropped, we will get the acceptedFiles. If you want, you can even access the rejected files too
    console.log(acceptedFiles);
    const axiosInstance = axios.create({
      baseURL: "http://localhost:5000"
    });

    const reader = new FileReader();
    reader.onabort = () => console.log("file reading was aborted");
    reader.onerror = () => console.log("file reading has failed");
    reader.onload = () => {
      // Do whatever you want with the file contents
      const binaryStr = reader.result;
      const body = JSON.stringify({
        binaryStr
      });
      await axiosInstance.post("/api/upload", body);
    };

    acceptedFiles.forEach(file => reader.readAsArrayBuffer(file));
  }, []);

Проблема : когда я добавляю Async Await к функции обратного вызова onDrop, я получаю: Parsing error: Can not use keyword 'await' outside an Async function

Так как я могу ждать доответ с сервера?

1 Ответ

2 голосов
/ 21 октября 2019 
// you forgot add async keyword here 
reader.onload = async () => {
  const binaryStr = reader.result;
  const body = JSON.stringify({
    binaryStr
  });
  await axiosInstance.post("/api/upload", body);
};

Также вы можете удалить верхний уровень async в useCallback(async....

...