reactjs - 如何导出函数和导入 react 钩子(Hook)

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
Attempted import error: 'OnSubmitLog_In' is not exported from './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 />

Demo