Statusverwaltung der Navigationsleiste

Question

Ich versuche, die Statusverwaltung zu nutzen, um meine Anwendung zu modifizieren und vielseitiger zu machen. Grundsätzlich handelt es sich bei meiner App um eine React-Web-App mit eingebettetem Tableau-Dashboard, und ich muss eine bestimmte Route (die ein bestimmtes Dashboard enthält) in der App füllen, indem ich einen JSON aus dem Backend lese, der die gewünschten Elemente angibt.

Ich brauche es auf zwei Arten:

UI-Projektwechsel ermöglicht es mir, zwischen Projekten zu wechseln JWT vom Anmeldeversuch über das Frontend erhalten (nach Erfolg) Ich denke, der einzige Zustand, der verwaltet werden muss, ist die Navigationsleiste und ihre Daten, die die relevanten Pfade rendern und dadurch relevante Dashboards nur nach Projekt/Benutzer ermöglichen.

Das ist der Code für meine Navigationsleiste:

import React, { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { NavbarData } from "./NavbarData";
import { IconContext } from "react-icons";
import "./Navbar.css";
import Hamburger from "./Icons/Hamburger.svg";
import "./Icons/p_logo_color.png";
import Persona from "./Icons/Persona.svg";
import Logout from "./Icons/Logout.svg";
//someting





//Navbar function
function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const [pageName, setPageName] = useState('Operational Overview');
  const location = useLocation();
  

  

  const getPageTitleByUrl = (path) => {
    NavbarData.filter((navItem) => {
    
      if(navItem.path === path) {
        setPageName(navItem.title);
      }
     return true; 
    } )
    


  };

  const userConfigPageTitle = (path) => {
    setPageName("User Information");

  }

  

  useEffect(() => {
    if(location.pathname) {
      getPageTitleByUrl(location.pathname);
    }
  }, [location] ); 
  

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
          <Link to="#" className="menu-bars">
             <img src={Hamburger} alt="hamburger" onClick={showSidebar} />
          </Link>

          <div className="criminal-records">Elecciones Guatemala |</div> 
          <div className="pageTitle"><h1>{pageName}</h1></div>

          <>
          <div><img className="userIcon" src={Persona} alt="persona" /> </div>
          <div className="userButton">User123#</div>
          </>

          <Link to='/' className="logout-button">
          <div><img className="logoutIcon" src={Logout} alt="persona" /> </div>
          <div className="logoutButton">Logout</div> 
          </Link>
          
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
            <li className="navbar-toggle">
          
            </li>
            {NavbarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
        
                  <span className="navbutton-icon">{item.icon}</span><span className="navbutton-text" >{item.title}</span>
                    
                    
                  </Link>
                  
                </li>
                
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

Das ist NavbarData:

import React from 'react'



import startpageIcon from './Icons/startpage.svg';
import performance from './Icons/performance.svg';
import bars from './Icons/bars.svg';
import simulation from './Icons/simulation.svg';
import fraud from './Icons/fraud.svg';
import deployForNow from './Icons/Profiles.svg';
import Planning from './Icons/plan.svg';
import deployment from './Icons/layer1.svg';
import barswithperson from './Icons/barswithperson.svg'





export const NavbarData = [
    {
        title: 'Simulación',
        path: '/monitoringoverview',
        icon: <img  src={simulation} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Empadronados",
        path: "/performancequality",
        icon: <img src={barswithperson} alt="" />,
        cName: 'nav-text'
    }


]

Im Grunde muss ich also den Dropdown-Umschalter anschließen, um die JSON-strukturierten Daten in den NavbarData zu ändern und jede dieser Änderungen als Status zu definieren. Da es sich also um eine sehr einfache Zustandsverwaltungsaufgabe handelt, möchte ich sie mit React Context lösen. Wie mache ich das?

Vielen Dank im Voraus!

Answer 1

使用 React Context 控制导航栏的状态：

§ 要定义上下文及其初始状态，请创建一个名为 NavbarContext.js 的文件。

import React, { createContext, useState } from "react";

export const NavbarContext = createContext();

export const NavbarProvider = ({ children }) => {
  const [navbarData, setNavbarData] = useState([]);

  return (
    <NavbarContext.Provider value={{ navbarData, setNavbarData }}>
      {children}
    </NavbarContext.Provider>
  );
};

§ 使用 NavbarProvider 组件包围您的应用程序或应用程序中的目标区域，这应该在您的主文件（即 App.js）中完成。

import { NavbarProvider } from "./NavbarContext";

function App() {
  return (
    <NavbarProvider>
      {/* Your app components */}
    </NavbarProvider>
  );
}

export default App;

§ 使用上下文来操作状态，您可以相应地修改导航栏组件。

import React, { useContext, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { IconContext } from "react-icons";
import { NavbarContext } from "./NavbarContext";
import "./Navbar.css";

function Navbar() {
  const { navbarData, setNavbarData } = useContext(NavbarContext);
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const [pageName, setPageName] = useState("Operational Overview");
  const location = useLocation();

  const getPageTitleByUrl = (path) => {
    navbarData.forEach((navItem) => {
      if (navItem.path === path) {
        setPageName(navItem.title);
      }
    });
  };

  useEffect(() => {
    if (location.pathname) {
      getPageTitleByUrl(location.pathname);
    }
  }, [location, navbarData]);

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        {/* Rest of your code */}
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

§ 在接收导航栏的 JSON 数据时（通常在登录后），您可以使用上下文中的 setNavbarData 函数更新 navbarData 状态。

import { useContext, useEffect } from "react";
import { NavbarContext } from "./NavbarContext";

function YourComponent() {
  const { setNavbarData } = useContext(NavbarContext);

  useEffect(() => {
    // Fetch your JSON data from the backend
    const fetchData = async () => {
      try {
        const response = await fetch("/api/navbarData");
        const data = await response.json();
        setNavbarData(data); // Update the navbarData state with the fetched data
      } catch (error) {
        console.log("Error fetching data:", error);
      }
    };

    fetchData();
  }, [setNavbarData]);

  return <div>Your component content</div>;
}

export default YourComponent;

使用 setNavbarData 更新 navbarData 状态现在会导致导航栏组件重新渲染，最终导致更新的数据显示在导航栏中。

React Router 需要正确的设置，并且必须将正确的依赖项导入到您的代码中。记下以验证这些步骤是否已完成。