javascript - การส่งออกสถานะจากฟังก์ชัน hook ไปยังคอมโพเนนต์อื่น

ฉันมีฟังก์ชัน/ไฟล์ hook ที่ฉันต้องการจะส่งออกสถานะที่เรียกว่า 'isAuth' เมื่อฉันพยายามนำเข้าค่าสถานะนี้ในไฟล์อื่นโดยใช้ import {isAuth} from '../AuthService/AuthRoute' ฉันได้รับข้อผิดพลาดการนำเข้า แผนของฉันคือการตั้งค่าและดึงค่าสถานะนี้ในระดับทั่วโลกในแอป React ของฉัน

นี่คือวิธีที่ฉันต้องการส่งออกสถานะจากฟังก์ชัน/คอมโพเนนต์ hook:

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 ของคุณ คุณสามารถสร้าง state และส่งต่อไปยังส่วนประกอบลูกของคุณได้ดังนี้

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" เพื่อให้คุณปฏิบัติตามกฎของ hooks ใน React คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับ export ได้ที่นี่