即使在 React 中正确导入后也不包含默认导出
Posted
技术标签:
【中文标题】即使在 React 中正确导入后也不包含默认导出【英文标题】：does not contain a default export even after being correctly imported in React 【发布时间】：2019-12-16 03:23:27 【问题描述】：我有一个从另一个文件导入 getAccesToken 常量的简单文件。但即使一切都被完美定义，我也会不断收到这个错误。我真的不知道为什么会发生这种情况。我在 SO 上查看了类似的问题，但大多数在导入时都有大括号。
PS 这个问题是this question 的续集。
这是我导入常量的文件：
import React, Component from 'react';
import Card, CardBody, CardHeader, Col, Row, Table from 'reactstrap';
import getAccessToken from '../helpers/api' //Here is the import
import reactLocalStorage from "reactjs-localstorage";
import API_TOKENS from "../data/storage";
import errorGettingUserInfoNotification, signINAgainNotification from "../helpers/notifications";
class all_orders extends Component
state =
todos: []
;
async componentDidMount()
try
const res = await fetch('http://127.0.0.1:8000/api/allorders/',
headers:
// your headers there as pair key-value, matching what your API is expecting, for example:
'details': getAccessToken()
);
// fetching the data from api, before the page loaded
const todos = await res.json();
console.log(todos);
this.setState(
todos
);
catch (e)
console.log(e);
render()
// const userList = usersData.filter((user) => user.id < 10)
return (
<div className="animated fadeIn">
<Row>
<Col xl=12>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> All Orders <small
className="text-muted"></small>
</CardHeader>
<CardBody>
<ul className="nav nav-tabs">
<li className="nav-item">
<a className="nav-link active"
href="base/all-orders#/base/hold-orders">Active</a>
</li>
<li className="nav-item">
<a className="nav-item" href="base/all-orders#/base/hold-orders">Link</a>
</li>
<li className="nav-item">
<a className="nav-item" href="base/all-orders#/base/hold-orders">Link</a>
</li>
<li className="nav-item">
<a className="nav-link disabled"
href="base/all-orders#/base/hold-orders">Disabled</a>
</li>
</ul>
<Table responsive hover>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">SKU ID</th>
<th scope="col">Quantity</th>
<th scope="col">Dimensions</th>
<th scope="col">Weight</th>
<th scope="col">Volume</th>
<th scope="col">Origin</th>
<th scope="col">Destination</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
this.state.todos.map(item => (
<tr>
<td>item.name</td>
<td>item.pid</td>
<td>item.quantity</td>
<td>item.length X item.width X item.height</td>
<td>item.weight</td>
<td>item.volume</td>
<td>item.origin</td>
<td>item.destination</td>
<td>item.time</td>
</tr>
))
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
)
export default all_orders;
这是我要导出的文件：
/*
Contains all URLs and ApiFunctions
*/
import axios from "axios";
import reactLocalStorage from "reactjs-localstorage";
import API_TOKENS from "../data/storage";
import errorGettingUserInfoNotification, signINAgainNotification from "./notifications";
const BASE_URL = "http://127.0.0.1:8000";
axios.defaults.baseURL = BASE_URL;
axios.defaults.headers.get['Content-Type'] = 'application/x-www-urlencoded';
const GET_TOKEN_PAIR = '/sign-in/';
const CREATE_ACCOUNT = '/sign-up/';
const USERNAME_AVAILABLE = '/username/available/';
const REFRESH_ACCESS_TOKEN = '/refresh/';
const USER_DETAILS = "/user/meta/";
export const getAccessToken = () =>
return new Promise(async (resolve, reject) =>
const data = reactLocalStorage.getObject(API_TOKENS);
if (!data)
return resolve('No User found');
let access_token = '';
const expires = new Date(data.expires * 1000);
const currentTime = new Date();
if (expires > currentTime)
access_token = data.tokens.access;
else
try
const new_token = await loadOpenUrl(REFRESH_ACCESS_TOKEN,
method: 'post',
data:
refresh: data.tokens.refresh,
);
access_token = new_token.access;
const expires = new_token.expires;
reactLocalStorage.setObject(API_TOKENS,
tokens:
...data.tokens,
access: access_token
,
expires: expires
);
catch (e)
try
if (e.data.code === "token_not_valid")
signINAgainNotification();
else
errorGettingUserInfoNotification();
catch (e)
// pass
return reject('Error refreshing token', e);
return resolve(access_token);
);
;
export const loadOpenUrl = async (url, config = ) =>
return new Promise((resolve, reject) =>
axios(url, config)
.then((res) => resolve(res.data))
.catch(err => reject(err.response))
);
;
export const loadSecureUrl = (url, config) =>
return new Promise(async (resolve, reject) =>
try
const data = await loadOpenUrl(url,
...config,
headers:
'Authorization': `Bearer $await getAccessToken()`
);
return resolve(data)
catch (e)
return reject(e)
)
;
export const getAPITokens = async (username, password) =>
return loadOpenUrl(GET_TOKEN_PAIR,
data:
username: username,
password: password
,
method: "post"
)
;
export const getUserDetails = () =>
//TODO: Show loading screen
const data = loadSecureUrl(USER_DETAILS);
//TODO: hide loading screen
return data;
;
export const isUsernameAvailable = async (username) =>
try
return await loadOpenUrl(USERNAME_AVAILABLE,
params:
username: username
)
catch (e)
console.log(e);
return false
;
export const signUpUser = async (data) =>
return loadOpenUrl(CREATE_ACCOUNT,
method: 'post',
data: data
)
;
export const allorders = async (data) =>
return loadOpenUrl(CREATE_ACCOUNT,
method: 'post',
data: data
)
;
我得到的错误：
编译失败 ./src/screens/all_orders.js
尝试导入错误：“../helpers/api”不包含默认导出>（导入为“getAccessToken”）。
【问题讨论】：
确切的错误是什么？./src/screens/all_orders.js Attempted import error: '../helpers/api' does not contain a default export (imported as 'getAccessToken').更新问题
【参考方案1】：
更清楚地说，有两种类型的导出：
1- 默认导出（每个模块一个）
在您的代码中将是：
export default const getAccessToken = () =>
import getAccessToken from '../helpers/api'
2- 命名导出（每个模块零个或多个导出）
在您的代码中将是：
export const getAccessToken = () =>
import getAccessToken from '../helpers/api'
【讨论】：
【参考方案2】：问题是您尝试导入default module（使用export default 导出），但您没有导出文件中的任何默认值。
因此，由于您的模块不是默认导出的，因此您必须使用这样的括号：
import getAccessToken from '../helpers/api' //Here is the import
或默认导出模块
export default const getAccessToken = () =>
那么你就可以像现在一样使用它了。
查看文档：import
这里有一些对快速了解导入/导出非常有用的东西：[es6] import, export, default cheatsheet
【讨论】：
【参考方案3】：此导入适用于default export，
import getAccessToken from '../helpers/api'
你已经导出为named export，你应该这样导入，
import getAccessToken from '../helpers/api'
Named Export vs Default Export in ES6
【讨论】：
以上是关于即使在 React 中正确导入后也不包含默认导出的主要内容，如果未能解决你的问题，请参考以下文章
尝试导入错误：“reactstrap”不包含默认导出（导入为“表”）