Просмотр / загрузка файла, возвращенного API в React Functional Component - PullRequest
Новая
       51

Просмотр / загрузка файла, возвращенного API в React Functional Component

0 голосов
/ 26 апреля 2020

У меня есть API, который возвращает файл (вложение). Как я могу создать функциональный компонент React, который может открыть файл, возвращенный из API, в браузере (если это был PDF или изображение) или загрузить его, если его нельзя исследовать в браузере? Мой компонент такой: 

import React from 'react'
import Axios from 'axios';
// const file = agent.Attachments.get('b9e7b6d2-a2b5-47a1-bc6a-08d7e9176cd3');
const file = Axios.get('localhost:5000/api/attachments/b9e7b6d2-a2b5-47a1-bc6a-08d7e9176cd3'); // this will return a file

export const Attachment = () => {
  return (
    <div>
      {/* I wan to open or download the file I got from axios*/}
    </div>
  )
}

export default Attachment;

1 Ответ

0 голосов
/ 26 апреля 2020

Измените ваши компоненты, как показано ниже: 

import React, { useState, useEffect, useCallback } from 'react';
import Axios from 'axios';

const Attachment = () => {
  const [file, setFile] = useState(undefined);
  const axiosGetFile = useCallback(async () => {
    try {
      const res = await Axios.get(
        'localhost:5000/api/attachments/b9e7b6d2-a2b5-47a1-bc6a-08d7e9176cd3'
      );
      console.log(res); // <== please write this response in your question.
      setFile(res);

    } catch (e) {
      console.log('--error--', e);
    }

  }, []);

  useEffect(() => {
    axiosGetFile();
  }, []);

  return <div />;
};

export default Attachment;

При использовании setFile ваш компонент сделает повторный рендеринг после получения файла, а затем вы сможете с ним справиться, но я должен знать, что ваш тип файла.

...