导入的函数在 React 中未定义

Question

In file1.js:

const doSomething = () => {
  console.log('yay');
};

export { doSomething }; 
//simplified, not using export default due to multiple exports

In file2.jsx:

import { doSomething } from './file1.js';

doSomething(); //undefined 

Been trying to solve this for a while now. Trying to import this method from one class and add it as an onClick for a component, but it's always undefined. Help would be appreciated

edit1: fixed import in simplified code

Answer 1

You can try this. import file1.js in file2.js like this

import * as demo from './file1.js';

and call your function like this

demo.doSomething()

Answer 2

The problem is you are calling the functions which will not return anything.

if you do console.log(doSomething()) , you will get logs like this.

yay //you called a functions its executed
undefined // you called a function which will not return anything

first log is from doSomething file1.js file.

second log is from file2.jsx

Answer 3

Change Function Expression to Function Declaration. Function Declaration is create's by interpretor before application is started.

Function Expression creates a variable that is equal to undefined.

• If file2 execute before file1 , doSomething variable is undefined.
• If file1 execute before file2 , doSomething variable is link to function.

Answer 4

fil1.js

export const doSomething = () => {
    console.log('yay');
};

file2.js

import { doSomething } from './file1.js';

doSomething();