reactjs - How to export function and import react hooks

Question

I know and know how to do it but it causes problems for me I just want to import the functions {OnSubmitLog_In and username} and maybe more how to listing it right is not going to make it a problem

2 js files

the first is imports like this

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

In the second file

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;

this is the error

./src/NAVBAR/nav.js
Attempted import error: 'OnSubmitLog_In' is not exported from './log_in'.

标签： reactjs

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 />

演示