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

Question

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

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 函数到 go 并根据登录用户返回真或假，但那是稍后的一段时间。 我当前的问题是当我导入此 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 中这两个函数内的控制台日志均未显示。 我试图改变我在 Header 中访问这两个函数的方式，如下所示，并得到 webpack 错误，那些不是函数......知道吗？

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

见下文 webpack 错误...

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

您不会从AppSecurity返回任何内容。 您需要在AppSecurity中添加以下返回语句。

  return { isAdminUser, isSuperUser };

您需要像这样导出它，因为AppSecurity是 function。

export default AppSecurity();

您需要在 object 中返回包含isAdminUser和isSuperUser属性的 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

您正在导出具有本地功能的 function，尝试导出 Object，如下所示

 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

首先感谢所有快速发布各种答案的人。 我必须承认我遗漏了一些基本的东西。 进行以下更改后，现在我可以调用这些函数，也可以在这些函数中使用 useAuthState() 挂钩。 问题原来是 function 名称的大写首字母..见下文... IsAdminUser 和 IsSuperUser 而不是is AdminUser 和is SuperUser 又是我这边的基本错误。

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