导航栏的状态管理

Question

我正在尝试使用状态管理来修改我的应用程序并使其更加通用。基本上我的应用程序是嵌入了 tableau 仪表板的 React Web 应用程序，我需要通过从后端读取指定我们想要的项目的 json 来在应用程序中填充特定的路由（包含特定的仪表板）。

我通过两种方式需要它：

UI 项目切换让我可以在项目之间切换 通过前端从登录尝试中收到的 JWT（成功后） 我认为唯一需要管理的状态是导航栏及其数据，将呈现相关路径，从而仅按项目/用户启用相关仪表板。

这是我的导航栏的代码：

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;

这是 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'
    }


]

所以基本上我需要的就是连接下拉切换器来更改 NavbarData 内的 json 结构化数据，并将这些变化中的每一个定义为状态。因此，由于这是一个非常简单的状态管理任务，我想使用 React Context 来解决它，我该怎么做？

提前致谢！

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 需要正确的设置，并且必须将正确的依赖项导入到您的代码中。记下以验证这些步骤是否已完成。