即使在 React 中正确导入后也不包含默认导出

Question

我有这个简单的文件，它从另一个文件中导入 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”）。

Answer 1

问题是您正在尝试导入default module （使用export default ），但您没有在文件中导出任何默认值。

所以，因为你的模块不是默认导出的，所以你必须使用这样的括号：

import { getAccessToken } from '../helpers/api'   //Here is the import

或将模块导出为默认值

export default const getAccessToken = () => {

那么你可以像现在一样使用它。

检查文档： 导入

这里有一些非常有用的东西，可以快速了解导入/导出： [es6] 导入、导出、默认备忘单

Answer 2

此导入用于default export ，

import getAccessToken from '../helpers/api' 

您已导出named export ，您应该像这样导入，

import {getAccessToken} from '../helpers/api' 

ES6 中的命名导出与默认导出

Answer 3

更清楚地说，有两种类型的导出：

1- 默认导出（每个模块一个）

在您的代码中将是：

export default const getAccessToken = () => {}

import getAccessToken from '../helpers/api' 

2- 命名导出（每个模块零个或多个导出）

在您的代码中将是：

export const getAccessToken = () => {}

import {getAccessToken} from '../helpers/api' 

• https://javascript.info/import-export
• https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export