La fonction importée est indéfinie dans React

Question

Dans file1.js :

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

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

Dans file2.jsx :

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

doSomething(); //undefined 

J'essaie de résoudre ce problème depuis un moment maintenant. J'essaie d'importer cette méthode d'une classe et de l'ajouter comme onClick pour un composant, mais elle est toujours indéfinie. Une aide serait appréciée

edit1 : correction de l'importation dans le code simplifié

Answer 1

Vous pouvez essayer ceci. importez file1.js dans file2.js comme ceci

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

et appelez votre fonction comme ceci

demo.doSomething()

Answer 2

Le problème est que vous appelez les fonctions qui ne renvoient rien.

si vous le faites console.log(doSomething()) , vous obtiendrez des journaux comme celui-ci.

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

Le premier journal est celui de doSomething file1.js fichier.

Le deuxième protocole provient de file2.jsx

Answer 3

Changer l'expression de la fonction en déclaration de fonction. La déclaration de fonction est créée par l'interprète antes de l'application est lancée.

La fonction Expression crée une variable qui est égale à undefined.

• Si file2 exécuter avant file1 La variable doSomething est indéfinie.
• Si file1 exécuter avant file2 La variable doSomething est liée à la fonction.

Answer 4

Fil1.js

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

file2.js

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

doSomething();