我有这个简单的文件，它从另一个文件导入getAccesToken常量。但是即使所有定义都完美，我仍会收到此错误。我真的不知道为什么会这样。我在SO上也看到了类似的问题，但是大多数在导入或类似内容时都带有花括号。
PS这个问题是一个续集这个问题。
这是我导入常量的文件：
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”导入）。
问题是您正在尝试导入default module（使用导出的export default），但没有导出文件中的任何默认值。
因此，由于未默认导出模块，因此必须使用如下方括号：
import { getAccessToken } from '../helpers/api' //Here is the import
或默认导出模块
export default const getAccessToken = () => {
那么您可以像现在一样使用它。
检查文档：导入
快速了解导入/导出的内容非常有用：[es6]导入，导出，默认备忘单
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句