導出默認 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;
  };