javascript - Eksportere en tilstand fra en hook-funksjon til en annen komponent

Jeg har en hook-funksjon/-fil hvor jeg vil eksportere en tilstand kalt 'isAuth'. Når jeg prøver å importere denne tilstanden i en annen fil som import {isAuth} fra '../AuthService/AuthRoute' får jeg en forsøkt import-feil. Planen min er å sette og hente denne tilstanden globalt i min React-applikasjon.

Slik vil jeg eksportere tilstanden fra hook-funksjonen/komponenten:

export default function AuthRoute () {

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

}

Dette er hvordan jeg planlegger å importere staten

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

Svar #1

Du kan bruke kontekster for å sette globale tilstander på denne måten. Opprett en fil kalt «AuthContext» som ser slik ut

import { createContext } from 'react';

export const AuthContext = createContext(false);

I din App.js-fil kan du opprette en state og gi den til dine underordnede komponenter på denne måten

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

Nå har du din isAuth-tilstand tilgjengelig for alle dine komponenter på øverste nivå. Hvis du noen gang vil se på eller manipulere den tilstanden i en komponent, gjør ganske enkelt som følger:

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

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

return (
//Your component code
)
}

Som en siste merknad vil jeg råde mot å bruke en boolsk verdi for å sjekke om noen er autorisert eller ikke på global skala. Det kan noen ganger forårsake merkelige problemer. Det er mye tryggere å bruke strenger som "AUTHORIZED" eller "NOT_AUTHORIZED".

Svar #2

Slik fungerer ikke eksport.

I koden din eksporterer du selve funksjonen, ikke verdien den returnerer.

Hvis du skal skrive en tilpasset hook, bruk den bare slik:

export default function useAuthRoute () {

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

}

import useAuthRoute from '../AuthRoute/AuthRoute'

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

Du må "kalle" den funksjonen og bruke den returnerte verdien. Og sørg for at du starter funksjonens navn med "use" slik at du følger reglene for Reacts hooks. Du kan finne mer om export her

Relaterte artikler