导出默认 function 在 ReactJS 中返回未定义的值

Question

ok, so, I want to separate my security related functions in a separate functional component. For this I ended up creating the below functional component

import { useAuthDispatch, logout, useAuthState } from "../context/context";

const AppSecurity = () => {
  

  const isAdminUser = () => {
    console.log("+++ isAdminUser called...");
    return true;
  };

  const isSuperUser = () => {
    console.log("+++ isSuperUser called...");
    return true;
  };
};

export default AppSecurity;

The grand plan is to implement both isAdminUser and isSuperUser functions eventually to go through security contexts and return true or false based on the logged in user but that's later some time. My current issue is when I import this AppSecurity functional component is other functional component and try to access the isAdminUser and isSuperUser functions, I get undefined values...see below

import AppSecurity from '../../utils/security'

function Header() {

  const isAdminUser = AppSecurity.isAdminUser;
  const isSuperUser = AppSecurity.isSuperUser;

  console.log('isAdminUser : ', isAdminUser)
  console.log('isAdminUser : ', isSuperUser)
}

export default Header;

in the above code BOTH console log returns ' undefined ' values. I am also noticing that none of the console logging inside those 2 functions within the AppSecurity shows up. I tried to change the way I access those two functions in my Header as per below and getting webpack error that those are not functions....Any idea?

const isAdminUser = AppSecurity.isAdminUser();
const isSuperUser = AppSecurity.isSuperUser();

see below webpack error...

TypeError: _utils_security__WEBPACK_IMPORTED_MODULE_17__.default.isAdminUser is not a function
Header
src/components/ui/header.component.jsx:200
  
> 200 | const isAdminUser = AppSecurity.isAdminUser();
      | ^  201 | const isSuperUser = AppSecurity.isSuperUser();
  202 | console.log('isAdminUser : ', isAdminUser)
  203 | const toggleDrawer = () => {

Answer 1

You are not returning anything from the AppSecurity function. You need to add the following return statement in the AppSecurity function.

  return { isAdminUser, isSuperUser };

you need to export it like, since AppSecurity is a function.

export default AppSecurity();

You need to return an object that contains both isAdminUser and isSuperUser property in an object

const AppSecurity = () => {
  

  const isAdminUser = () => {
    console.log("+++ isAdminUser called...");
    return true;
  };

  const isSuperUser = () => {
    console.log("+++ isSuperUser called...");
    return true;
  };

  return { isAdminUser, isSuperUser };
};

export default AppSecurity();

Answer 2

You are Exporting a function which in having local functions, try exporting an Object like below

 import { useAuthDispatch, logout, useAuthState } from "../context/context"; const AppSecurity = { isAdminUser: () => { console.log("+++ isAdminUser called..."); return true; }, isSuperUser: () => { console.log("+++ isSuperUser called..."); return true; } }; export default AppSecurity;

Answer 3

First of all thanks everyone who quickly posted various answers. I must admit that I was missing a few basic stuff. After making below changes, now I can call those functions and can also use the useAuthState() hook inside those functions. The issue turned out to be uppercase first letter of the function names..see below... IsAdminUser and IsSuperUser instead of is AdminUser and is SuperUser Once again basic mistake on my side.

import React from 'react';
import { useAuthDispatch, logout, useAuthState } from "../context";

  export const IsAdminUser = () => {
    const userDetails = useAuthState();
    console.log("+++ IsAdminUser called...");
    return true;
  };

  export const IsSuperUser = () => {
    console.log("+++ IsSuperUser called...");
    return false;
  };