React页面间数据同步问题：点击Buy按钮后Header无法获取最新localStorage值

你的问题核心是：直接修改localStorage不会触发React组件重新渲染，所以Header组件无法感知到值的变化。以下是两种实用的解决方案：

方案一：用React Context管理全局状态（推荐） #

通过Context将购物车状态提升到全局，组件间共享状态，同时自动同步到localStorage，状态变化时所有订阅组件都会自动更新。

1. 创建购物车Context #

新建CartContext.js文件：

import { createContext, useContext, useState, useEffect } from 'react';

const CartContext = createContext();

export function CartProvider({ children }) {
  // 从localStorage初始化状态
  const [cartCount, setCartCount] = useState(() => {
    const saved = localStorage.getItem('countcart');
    return saved ? parseInt(saved, 10) : 0;
  });

  // 状态变化时自动同步到localStorage
  useEffect(() => {
    localStorage.setItem('countcart', cartCount.toString());
  }, [cartCount]);

  // 切换购物车数量的方法
  const toggleCartCount = () => {
    setCartCount(prev => prev === 0 ? 1 : 0);
  };

  return (
    <CartContext.Provider value={{ cartCount, toggleCartCount }}>
      {children}
    </CartContext.Provider>
  );
}

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

2. 在Home.js中包裹组件 #

用CartProvider包裹Header和Post，让它们共享Context状态：

import { CartProvider } from './CartContext';
import Header from './Header';
import Post from './Post';

function Home() {
  return (
    <CartProvider>
      <Header />
      <Post />
    </CartProvider>
  );
}

3. 修改Post.js使用Context方法 #

替换原来的sumCount函数，直接调用Context提供的方法：

import { useCart } from './CartContext';
import Button from '@mui/material/Button';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import styles from './Post.module.css';

function Post() {
  const { toggleCartCount } = useCart();

  return (
    <Button 
      className={styles.buy} 
      onClick={toggleCartCount} 
      variant="contained" 
      endIcon={<ShoppingCartIcon fontSize="small"/>}
    >
      <div className={styles.buytext}>Buy</div>
    </Button>
  );
}

4. 在Header.js中获取实时状态 #

通过自定义Hook订阅Context状态，自动更新：

import { useCart } from './CartContext';

function Header() {
  const { cartCount } = useCart();

  return (
    <div>购物车数量：{cartCount}</div>
  );
}

方案二：监听自定义事件（无需Context） #

如果不想用Context，可以通过派发自定义事件通知Header组件更新：

1. 修改Post.js的点击事件 #

更新localStorage后手动派发事件：

const [count, setCount] = useState(() => {
  const saved = localStorage.getItem('countcart');
  return saved ? parseInt(saved, 10) : 0;
});

const sumCount = () => {
  const newCount = count === 0 ? 1 : 0;
  setCount(newCount);
  localStorage.setItem('countcart', newCount.toString());
  // 派发自定义事件通知更新
  window.dispatchEvent(new CustomEvent('cartUpdated', { detail: newCount }));
};

2. 在Header.js中监听事件 #

订阅自定义事件，更新本地状态：

import { useState, useEffect } from 'react';

function Header() {
  const [cartCount, setCartCount] = useState(() => {
    const saved = localStorage.getItem('countcart');
    return saved ? parseInt(saved, 10) : 0;
  });

  useEffect(() => {
    const handleCartUpdate = (e) => {
      setCartCount(e.detail);
    };
    // 监听自定义事件
    window.addEventListener('cartUpdated', handleCartUpdate);
    // 组件卸载时清理监听
    return () => window.removeEventListener('cartUpdated', handleCartUpdate);
  }, []);

  return (
    <div>购物车数量：{cartCount}</div>
  );
}

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