ウェブサイト検索

javascript - フック関数から別のコンポーネントへの状態のエクスポート

私はフック関数／ファイルを持っており、その中で 'isAuth' という状態をエクスポートしたいです。この状態を別のファイルで import {isAuth} from '../AuthService/AuthRoute' のようにインポートしようとすると、インポートを試みた際のエラーが発生します。私の計画は、この状態を React アプリケーション全体でグローバルに設定および取得することです。

これは、フック関数/コンポーネントから状態をエクスポートしたい方法です：

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("");

回答 #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()
  ...

その関数を「呼び出して」、返された値を使用する必要があります。そして、Reactのフックのルールに従うために、関数の名前を「use」で始めることを確認してください。exportについての詳細はここで確認できます

関連記事