ReactJS如何不刷新页面更新外部导入的Sidebar组件

直接调用Sidebar()函数无法更新菜单，因为React组件的渲染和更新完全依赖状态（state）或属性（props）的变化，手动执行组件函数不会触发React的重新渲染流程。以下是两种可行的实现方案：

方案1：父组件传递状态（适合组件层级较浅的场景） #

如果主页面是Sidebar的直接父组件，可以在主页面维护选中店铺的状态，通过props传递给Sidebar，状态更新时自动触发Sidebar重新渲染。

步骤1：主页面添加状态并更新 #

import { useState, useEffect } from 'react';
import Sidebar from "../Sidebar.js";
import axios from 'axios';

function MainPage() {
  // 维护选中店铺的状态，初始值可从后端或本地存储获取
  const [selectedShop, setSelectedShop] = useState(null);

  // 页面加载时初始化已选中的店铺
  useEffect(() => {
    const fetchSelectedShop = async () => {
      const res = await axios.get('http://localhost:5000/get-selected-shop');
      setSelectedShop(res.data);
    };
    fetchSelectedShop();
  }, []);

  const shopSelect = async (e) => {
    e.preventDefault();
    try {
      await axios.post('http://localhost:5000/select', { sel: sel });
      // 更新本地状态，触发Sidebar重新渲染
      setSelectedShop(sel);
      // 可选：将选中店铺存入localStorage，防止页面刷新后丢失
      localStorage.setItem('selectedShop', JSON.stringify(sel));
    } catch (error) {
      error.response && console.log(error.response);
    }
  };

  return (
    <div>
      {/* 将选中店铺作为props传给Sidebar */}
      <Sidebar selectedShop={selectedShop} />
      {/* 你的店铺选择表单 */}
      <form onSubmit={shopSelect}>
        {/* 店铺选择元素 */}
      </form>
    </div>
  );
}

步骤2：修改Sidebar组件接收props #

function Sidebar({ selectedShop }) {
  return (
    <div className="sidebar">
      {/* 根据选中的店铺渲染对应菜单 */}
      {selectedShop && (
        <div className="shop-specific-menu">
          <h3>{selectedShop.name}</h3>
          {/* 店铺专属子菜单选项 */}
        </div>
      )}
      {/* 其他固定菜单内容 */}
    </div>
  );
}

export default Sidebar;

方案2：使用React Context（适合跨多层组件的场景） #

如果Sidebar和店铺选择组件不在同一层级，逐层传递props会很繁琐，此时可以用React Context实现状态全局共享。

步骤1：创建ShopContext #

// ShopContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import axios from 'axios';

const ShopContext = createContext();

export function ShopProvider({ children }) {
  const [selectedShop, setSelectedShop] = useState(null);

  // 初始化已选中的店铺
  useEffect(() => {
    const savedShop = localStorage.getItem('selectedShop');
    savedShop && setSelectedShop(JSON.parse(savedShop));
  }, []);

  // 封装更新选中店铺的方法
  const updateSelectedShop = async (shop) => {
    try {
      await axios.post('http://localhost:5000/select', { sel: shop });
      setSelectedShop(shop);
      localStorage.setItem('selectedShop', JSON.stringify(shop));
    } catch (error) {
      error.response && console.log(error.response);
    }
  };

  return (
    <ShopContext.Provider value={{ selectedShop, updateSelectedShop }}>
      {children}
    </ShopContext.Provider>
  );
}

// 自定义Hook简化Context调用
export function useShop() {
  return useContext(ShopContext);
}

步骤2：根组件包裹ShopProvider #

// App.js
import { ShopProvider } from './ShopContext';
import MainPage from './MainPage';

function App() {
  return (
    <ShopProvider>
      <MainPage />
    </ShopProvider>
  );
}

步骤3：店铺选择组件中调用更新方法 #

// MainPage.js
import { useShop } from './ShopContext';

function MainPage() {
  const { updateSelectedShop } = useShop();

  const shopSelect = async (e) => {
    e.preventDefault();
    await updateSelectedShop(sel);
  };

  return (
    <div>
      {/* 店铺选择表单 */}
      <form onSubmit={shopSelect}>
        {/* 选择元素 */}
      </form>
    </div>
  );
}

步骤4：Sidebar组件中获取选中状态 #

// Sidebar.js
import { useShop } from './ShopContext';

function Sidebar() {
  const { selectedShop } = useShop();

  return (
    <div className="sidebar">
      {selectedShop && (
        <div className="shop-specific-menu">
          <h3>{selectedShop.name}</h3>
          {/* 店铺专属菜单 */}
        </div>
      )}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Harrison Martes