无法导入命名导出；错误说只有默认导出可用

Question

我正在尝试将函数从

src/api/api

导入到

src/App.js

。

这是我在

App.js

中的所有重要声明：

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

import { fetch_db_files_metadata } from './api/api';
import { fetch_uploads_metadata } from './api/api';
import { start_push_to_DB } from './api/api';
import { start_upload_deletion } from './api/api';
import { start_file_deletion } from './api/api';
import { start_file_download } from './api/api';

import './App.css';

这是我的函数标题：

api.js

：

export const fetch_db_files_metadata = async () => {}
export const fetch_uploads_metadata = async () => {}
export const start_push_to_DB = async () => {}
export const start_upload_deletion = async (upload_deletion_list) => {}
export const start_file_deletion = async (file_deletion_list) => {}
export const start_file_download = async (file_download_list) => {}

export{}

底部没有

export default{}

或

api.js

块。

api.js

仅包含功能。

React.JS 无法编译。以下是错误消息：

./src/App.js 中的错误 59:32-55 无法从默认导出模块导入命名导出“fetch_db_files_metadata”（导入为“fetch_db_files_metadata”）（仅默认导出可用）

./src/App.js 中的错误 64:34-56 无法从默认导出模块导入命名导出“fetch_uploads_metadata”（导入为“fetch_uploads_metadata”）（仅默认导出可用）

./src/App.js 中的错误 69:33-49 无法从默认导出模块导入命名导出“start_push_to_DB”（导入为“start_push_to_DB”）（仅默认导出可用）

./src/App.js 中的错误 79:34-55 无法从默认导出模块导入命名导出“start_upload_deletion”（导入为“start_upload_deletion”）（仅默认导出可用）

./src/App.js 中的错误 88:35-54 无法从默认导出模块导入命名导出“start_file_download”（导入为“start_file_download”）（仅默认导出可用）

./src/App.js 中的错误 96:32-51 无法从默认导出模块导入命名导出“start_file_deletion”（导入为“start_file_deletion”）（仅默认导出可用）

webpack 编译有 6 个错误和 1 个警告

我尝试删除大括号，这允许应用程序编译，但会导致运行时错误，表明当我尝试调用这些函数时，这些函数不是函数。

Answer 1

错误提示说：（只有默认导出可用），所以你可以在这里创建默认导出。创建一个对象，将所有要导出的函数头放入其中，默认导出该对象。

导出自：src/api/api.js:

const fetch_db_files_metadata = async () => {}
const fetch_uploads_metadata = async () => {}
const start_push_to_DB = async () => {}
const start_upload_deletion = async (upload_deletion_list) => {}
const start_file_deletion = async (file_deletion_list) => {}
const start_file_download = async (file_download_list) => {}

export default {
  fetch_db_files_metadata,
  fetch_uploads_metadata,
  start_push_to_DB,
  start_upload_deletion,
  start_file_deletion,
  start_file_download
};

在App.js中导入：

import API from './api/api';
API.fetch_db_files_metadata();
API.fetch_uploads_metadata();
API.start_push_to_DB();
API.start_upload_deletion(upload_deletion_list);
API.start_file_deletion(file_deletion_list);
API.start_file_download(file_download_list);