Javascript export default函数返回ReactJS中未定义的值

好的，我想在一个单独的功能组件中分离与安全相关的功能。为此，我最终创建了以下功能组件

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;

宏伟的计划是实现isAdminUser和isSuperUser函数，最终检查安全上下文，并根据登录用户返回true或false，但这要等一段时间。我当前的问题是，当我将此AppSecurity功能组件导入其他功能组件并尝试访问isAdminUser和isSuperUser功能时，我会得到未定义的值…见下文

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;

在上面的代码中，两个控制台日志都返回“未定义的值”。我还注意到，AppSecurity中这两个函数中的控制台日志都没有显示。我试图改变我在标题中访问这两个函数的方式，如下所示，并得到网页错误，这些不是函数…有什么想法吗

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

请参阅下面的网页错误

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 = () => {

---

您没有从

AppSecurity

函数返回任何内容。您需要在

AppSecurity

函数中添加以下返回语句

  return { isAdminUser, isSuperUser };

export default AppSecurity();

您需要像导出一样导出它，因为

AppSecurity

是一个函数

  return { isAdminUser, isSuperUser };

export default AppSecurity();

您需要返回一个对象，该对象在对象中同时包含

isadmin

和

issupurer

属性

const AppSecurity = () => {
  

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

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

  return { isAdminUser, isSuperUser };
};

export default AppSecurity();

---

您正在导出一个函数，在使用局部函数时，请尝试导出如下所示的对象

---

import{useAuthDispatch，logout，useAuthState}来自“./context/context”；
常量AppSecurity={
isAdminUser:（）=>{
log（“+++isadmin用户调用…”）；
返回true；
},
发行人：（）=>{
log（“+++被调用的发行者…”）；
返回true；
}
};
出口违约担保首先感谢所有快速发布各种答案的人。我必须承认我遗漏了一些基本的东西。在做了以下更改之后，现在我可以调用这些函数，也可以在这些函数中使用useAuthState（）钩子。问题是函数名的第一个大写字母..见下文。。。IsAdminUser和IsSuperUser而不是是AdminUser和是超级用户，这是我的一个基本错误

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;
  };

如果他们这样做，他们在使用它时也必须调用
AppSecurity
（因为它是一个函数），即
const isadmin=AppSecurity（）好的，首先非常感谢所有回复的人。非常感谢。现在，我按照@De C的路径运行，但它按预期工作，它可能不符合我的要求，因为我需要使用上下文挂钩，我得到一个错误..请参阅下面的代码..从“./context/context”导入{useAuthDispatch，logout，useAuthState}；const-AppSecurity=（）=>{//const-userDetails=useAuthState（）；const-isadmin=（）=>{console.log（“+++isadmin用户已调用…”）；console.log（'+++userDetails-TOKEN..'，userDetails.TOKEN）返回true；}；const-issupuser=（）=>{return true；}；返回{isadmin用户，issupuser}；}；导出默认AppSecurity（）；这不是函数的工作原理。在另一个函数中定义一个函数并不意味着该嵌套函数可以作为外部函数定义的某个静态属性访问。使用一个对象或类，或者按照De C在回答中的建议执行，返回它并调用它以获取解决方案返回的函数hanks@Ravikumar，尽管我还需要在这个security.js中使用上下文API，如果我添加const userDetails=useAuthState（），我会得到一个错误；useAuthState代码如下所示。。。export const useAuthState=（）=>{const context=React.useContext（AuthStateContext）；if（context==未定义）{抛出新错误（'useAuthState必须在AuthProvider中使用'）；}返回上下文；}