如何跨多个组件使用 state？

Question

我目前正在将用户登录信息存储在本地存储中，并根据情况呈现适当的导航栏。 但是，该页面不会在登录或退出时重新呈现。 我需要手动刷新页面以使其正常工作。 在这种情况下，如何跨多个组件使用 state？

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Navbar, Nav, Button } from "react-bootstrap";
import SignInModal from "././SignIn/SignInModal";

const NavBar = () => {
  return localStorage.getItem("auth-token") ? <SignedIn /> : <SignedOut />;
};

const SignedIn = () => {
  return (
    <Navbar className="justify-content-around main-navbar">
      <Nav.Item>
        <Link className="link" to="/">
          Signed Out
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/mainsignedin">
          Sign In
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/searchpage">
          Our Dogs
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/mypets">
          My Pets
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Button type="submit" onClick={localStorage.clear()}>
          Sign Out
        </Button>
      </Nav.Item>
    </Navbar>
  );
};

const SignedOut = () => {
  return (
    <Navbar>
      <Nav.Item>
        <SignInModal />
      </Nav.Item>
    </Navbar>
  );
};
export default NavBar;

Answer 1

这是代码。

import SignInModal from "././SignIn/SignInModal";
import {useEffect, useState} from 'react';
const NavBar = () => {
  const [isLogedIn,setIsloggedIn] =useState(false);
   useEffect(()=>{
      const auth_token = localStorage.getItem("auth-token") ;
     setIsloggedIn(auth_token ? true:false);
   },[])
   const handleSignOut=()=>{
     localStorage.clear()
     setIsloggedIn(false);
   }
  return isLogedIn ? <SignedIn onSignOut={handleSignOut} /> : <SignedOut />;
};

const SignedIn = ({onSignOut}) => {
  return (
    <Navbar className="justify-content-around main-navbar">
      <Nav.Item>
        <Link className="link" to="/">
          Signed Out
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/mainsignedin">
          Sign In
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/searchpage">
          Our Dogs
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/mypets">
          My Pets
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Button type="submit" onClick={onSignOut}>
          Sign Out
        </Button>
      </Nav.Item>
    </Navbar>
  );
};

const SignedOut = () => {
  return (
    <Navbar>
      <Nav.Item>
        <SignInModal />
      </Nav.Item>
    </Navbar>
  );
};
export default NavBar;

Answer 2

您可以使用useState 挂钩来跟踪 React 功能组件中的 state。

您可以使用Context向其子级提供 state。 然后，您可以在这些子项中使用useContext 挂钩来访问 state。

import React, { createContext, useContext } from 'react'

const MyContext = createContext({})
const MyContextProviderComponent = MyContext.Provider

const MyInnerComponent = () => {
    const myValue = useContext(MyContext)
    return <p>{myValue}</p>
}

const MyOuterComponent =() =>{
    const [myValue, setMyValue] = useState('Hello world!')
    return (
        <MyContextProviderComponent value={myValue}>
            <MyInnerComponent></MyInnerComponent>
        </MyContextProviderComponent>
    )
}