将状态从钩子函数导出到另一个组件

Posted 2023-03-07

【中文标题】将状态从钩子函数导出到另一个组件

【英文标题】：Exporting a state from hook function to another component

【发布时间】：2021-06-17 23:25:58

【问题描述】：

我有一个钩子函数/文件，我想在其中导出一个名为“isAuth”的状态。当我尝试将此状态作为 import isAuth from '../AuthService/AuthRoute' 导入另一个文件时，我收到尝试导入错误。我的计划是在我的反应应用程序中全局设置和获取此状态

这就是我想从钩子函数/组件中导出状态的方式：

export default function AuthRoute () 

  const [isAuth, setIsAuth] = useState(false);
  
  return isAuth

这就是我计划导入状态的方式

import  isAuth from '../AuthRoute/AuthRoute'

function Login () 
 
  const [usernameAuth, setUsernameAuth] = useState("");
  const [passwordAuth, setPasswordAuth] = useState("");
  const [loginStatus, setLoginStatus] = isAuth();  //Imported state
  const [inputResponse, setInputResponse] = useState("");

【问题讨论】：

如果您希望您的状态在全球范围内可用，您应该研究像 React 的 Context API 或 Redux 这样的状态管理。

你只是在寻找一个自定义的钩子，它应该从使用开始*

【参考方案1】：

您可以使用上下文来设置这样的全局状态。创建一个名为“AuthContext”的文件，如下所示

import  createContext  from 'react';

export const AuthContext = createContext(false);

在您的 App.js 文件中，您可以创建一个状态并将其提供给您的子组件，就像这样

import React,  useState  from 'react';
import  AuthContext  from './path/to/AuthContext';


const App = props => 
const [isAuth, setIsAuth] = useState(false);

return (
<AuthContext.Provider value=[isAuth, setIsAuth]>
//YOUR APPLICATION
</AuthContext.Provider >
)

现在您已将 isAuth 状态提供给所有***组件。如果您想在组件中查看或操作该状态，只需执行以下操作：

import React,  useContext  from 'react';
import  AuthContext  from './path/to/AuthContext';

const YourComponent = props => 
const [isAuth, setIsAuth] = useContext(AuthContext);

return (
//Your component code
)

最后一点，我建议不要使用布尔值来检查某人是否在全球范围内获得授权。它有时会导致奇怪的问题。使用“AUTHORIZED”或“NOT_AUTHORIZED”等字符串会更安全。

【参考方案2】：

这不是导出的工作原理。

在您的代码中，您导出的是函数本身，而不是它返回的值。

如果您要编写自定义钩子，只需像这样使用它：

export default function useAuthRoute () 

  const [isAuth, setIsAuth] = useState(false);
  
  return isAuth

import useAuthRoute from '../AuthRoute/AuthRoute'

function Login () 
  const  isAuth  = useAuthRoute()
  ...

您需要“调用”该函数并使用返回值。 并确保你以“use”开始函数的名称，以便遵循 React 的钩子规则。 你可以找到更多关于exporthere