我正在尝试使用状态管理来修改我的应用程序并使其更加通用。基本上我的应用程序是嵌入了 tableau 仪表板的 React Web 应用程序，我需要通过从后端读取指定我们想要的项目的 json 来在应用程序中填充特定的路由（包含特定的仪表板）。
我通过两种方式需要它：
UI 项目切换让我可以在项目之间切换 通过前端从登录尝试中收到的 JWT（成功后） 我认为唯一需要管理的状态是导航栏及其数据，将呈现相关路径，从而仅按项目/用户启用相关仪表板。
这是我的导航栏的代码：
1
982import 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 来解决它，我该怎么做？
提前致谢！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
使用 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 需要正确的设置，并且必须将正确的依赖项导入到您的代码中。记下以验证这些步骤是否已完成。