如何导出函数和导入反应钩子

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
尝试导入错误：“OnSubmitLog_In”未从“./log_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 />

演示