React获取并显示Rails中的附加文件

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

const FileComponent = () => {
  const [fileUrl, setFileUrl] = useState('');

  useEffect(() => {
    const fetchFile = async () => {
      try {
        const response = await axios.get('/api/files/1'); // 根据实际情况修改API接口路径和参数
        const { url } = response.data; // 假设后端返回的数据中包含文件的URL
        setFileUrl(url);
      } catch (error) {
        console.error(error);
      }
    };

    fetchFile();
  }, []);

  return (
    <div>
      {fileUrl && <img src={fileUrl} alt="附加文件" />} // 假设是图片文件
    </div>
  );
};

export default FileComponent;

# routes.rb
Rails.application.routes.draw do
  namespace :api do
    resources :files, only: [:show] # 根据实际情况修改路由路径和请求方法
  end
end

# files_controller.rb
class Api::FilesController < ApplicationController
  def show
    file = File.find(params[:id]) # 根据实际情况获取文件对象
    render json: { url: file.url } # 假设文件对象有一个url属性，存储文件的URL
  end
end