即使在React中正确导入后也不包含默认导出 [英] does not contain a default export even after being correctly imported in React
本文介绍了即使在React中正确导入后也不包含默认导出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个简单的文件，它从另一个文件导入getAccesToken常量。但是即使所有定义都完美，我仍会收到此错误。我真的不知道为什么会这样。我在SO上也看到了类似的问题，但是大多数在导入时都带有花括号。
I have this simple file which imports getAccesToken constant from another file. But I keep getting this error even when everything is defined perfectly. I really have no clue why would this happen. I looked similar questions on SO, but most had curly brackets when importing or something.
PS这个问题是获取数据来集成访问令牌。
此是我的文件导入常量：
This is my file importing the constant:
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
Failed to compile ./src/screens/all_orders.js
尝试导入错误：'../helpers/api'不包含默认导出>（导入为'getAccessToken '）。
Attempted import error: '../helpers/api' does not contain a default export >(imported as 'getAccessToken').
推荐答案
问题是您试图导入默认模块（已使用导出默认值导出），但是您没有在文件中导出任何默认值。
The problem is that you are trying to import a default module (which was exported using export default), but you didn't export any default in your file.
因此，由于未默认导出模块，因此必须使用如下方括号：
So, because your module is not default exported you have to use brackets like this:
import { getAccessToken } from '../helpers/api' //Here is the import
或导出模块为默认值
export default const getAccessToken = () => {
然后您可以像现在一样使用它。
then you can use it as you do now.
检查文档：导入
以下是快速了解导入/导出的一些有用信息： [es6]导入，导出，默认备忘单
And here is something very useful to understand quick about import/exports: [es6] import, export, default cheatsheet
这篇关于即使在React中正确导入后也不包含默认导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
