我正在嘗試使用狀態管理來修改我的應用程式並使其更加通用。基本上我的應用程式是嵌入了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 來解決它，我該怎麼做？
提前致謝！
使用 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 需要正確的設置，並且必須將正確的依賴項匯入到您的程式碼中。記下以驗證這些步驟是否已完成。