Question

我知道并且知道该怎么做，但这会给我带来麻烦我只想导入功能{OnSubmitLog_In and username}，也许更多如何正确列出它不会使它成为问题

2个js文件

第一个是这样的进口

import * as Login from './log_in';
import { OnSubmitLog_In, username } from './log_in';

在第二个文件中

async function OnSubmitLog_In(e) {
    e.preventDefault();
    var data = { username, password }
    await axios.post("http://localhost:4000/users/signin", data, {
    }).then((response) => {
        if (localStorage.getItem('token', response.data.accessToken)) {
            alert('user alredy in')
        } else {
            alert('hellow ' + data.username)
            localStorage.setItem('token', response.data.accessToken)
            console.log('response data', response.data)
            console.log('response config', response.config.data)
        }


    }, (error) => {
        console.log('error', error)
        if (405) {
            alert('user not found')
        } else if (500) {
            alert('user not found try again')
        }
    });
}
export default Log_In;

这是错误

./ src / NAVBAR / nav.js
尝试导入错误：“ ./ log_in”未导出“ OnSubmitLog_In”。

Answer 1

您要导出为default，应该这样导入

import OnSubmitLog_In from './log_in';  //Not sure about username

更新

要将所有内容从单个文件导入为

import * as Login from './log_in'

您需要将所有内容从named export文件导出为log_in。

例如，这是我的log_in文件

import React from 'react'


export const MyComponent = () => {
  return <div>Component 1</div>
}
export const MyComponent2 = () => {
  return <div>Component 2</div>
}

现在您可以在父组件中使用这些组件了，

<Login.MyComponent />
<Login.MyComponent2 />

Demo

Answer 2

您应该将功能导出到对象中，以照常的方式导入它们。

赞：

async function OnSubmitLog_In(e) {
    e.preventDefault();
    var data = { username, password }
    await axios.post("http://localhost:4000/users/signin", data, {
    }).then((response) => {
        if (localStorage.getItem('token', response.data.accessToken)) {
            alert('user alredy in')
        } else {
            alert('hellow ' + data.username)
            localStorage.setItem('token', response.data.accessToken)
            console.log('response data', response.data)
            console.log('response config', response.config.data)
        }


    }, (error) => {
        console.log('error', error)
        if (405) {
            alert('user not found')
        } else if (500) {
            alert('user not found try again')
        }
    });
}
export {
  OnSubmitLog_In
};

Answer 3

您必须import进行以下编码。

import OnSubmitLog_In, { username } from './log_in';

这里您要导出为default。如果删除default，则必须编写以下代码。

import { OnSubmitLog_In, username } from './log_in';

如何导出功能和导入反应挂钩

3 个答案: