React读取localStorage购物车数据时CartCounterIcon组件无法自动渲染

问题根因 #

React组件只有在自身state变化、接收的props变化、父组件重渲染这三种情况才会触发重渲染。你当前的CartCounterIcon组件直接在渲染时调用getCartItems()读取localStorage，但localStorage本身不属于React的响应式状态，它的变更不会通知React触发组件更新，因此只有页面刷新组件重新挂载时才会读取到最新值。

同时你原有MenuComponent中的useEffect存在冗余逻辑：同时绑定了拉取商品和存储购物车逻辑，导致每次加购都会重复请求商品列表，后续方案中会同步修复这个问题。

解决方案 #

方案1：状态提升（最适合小型项目，改动最小） #

将购物车cart状态提升到MenuComponent和CartCounterIcon的公共父组件中，通过props传递cart状态和修改方法：

1. 修改MenuComponent.js：

import ProductCard from './Cards/ProductCard'
import {Container, Row, Col, Button} from 'react-bootstrap'
import {useState, useEffect} from 'react'
import '../styles/MenuComponent.css'

const MenuComponent = ({cart, addToCart}) => {
    const [productos, setProductos] = useState([])

    // 仅组件挂载时拉取一次商品列表
    useEffect(() => {
        getProducts();
    },[])

    // cart变更时同步到localStorage
    useEffect(() => {
        localStorage.setItem('cart', JSON.stringify(cart));
    },[cart])

    const getProducts = async() => {
        try {
            const res = await fetch('https://my-json-server.typicode.com/Fawkes11/FAKE_API_services/menu');
            const data = await res.json();
            setProductos(data);
          } catch (error) {
            console.log(error);
          }
    }
    return (
        <Container fluid className="menuComponentContainer p-5">
            <Row style={{paddingLeft: '150px', paddingRight: '150px'}}>
                <Col style={{display: 'flex', justifyContent:'center'}}>
                    <h2>Menú</h2>
                </Col>
                <Col style={{display: 'flex', justifyContent:'center'}}>
                    <Button className='productCardButton'>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-download me-2" viewBox="0 0 16 16">
                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                        <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                        </svg>
                        Descargar
                    </Button>
                </Col>
            </Row>
            <Row style={{marginTop: '20px'}}>
                {
                    productos.map((pro) => {
                        return(
                            <Col className='cElementsMenu' key={pro.id}>
                                {cart.length}
                                <ProductCard
                                addToCart={addToCart}
                                id={pro.id}
                                photo={pro.imagen}
                                name={pro.product}
                                type={pro.type}
                                size={pro.tamaño}
                                price={pro.precio}
                                />
                            </Col> 
                        )
                    })
                }             
            </Row>
        </Container>
    )
}

export default MenuComponent;

2. 公共父组件（比如App.js）维护cart状态，同时传递给两个子组件：

import {useState} from 'react'
import MenuComponent from './MenuComponent'
import CartCounterIcon from './CartCounterIcon'

function App() {
  // 初始值从localStorage读取，避免刷新丢失
  const [cart, setCart] = useState(() => {
    const data = localStorage.getItem('cart')
    return data ? JSON.parse(data) : []
  })
  const addToCart = (product) =>{
    setCart([...cart, product])      
  }
  return (
    <div>
      <CartCounterIcon count={cart.length} />
      <MenuComponent cart={cart} addToCart={addToCart} />
    </div>
  )
}

3. 修改CartCounterIcon.jsx接收count props：

import React from 'react'

function CartCounterIcon({count}) {
    return (
        <div style={countIcon.div}><p style={countIcon.p}>{count}</p></div>
    )
}

const countIcon = {
    div: {
        margin: '0',
        padding: '0px 6px',
        position: 'absolute',
        right: '0',
        top: '0',
        backgroundColor: '#91491a',
        borderRadius: '20%',
    },
    p: {
        margin: '0',
        color: '#eadac0',
        fontWeight: 'bold',
    }
}

export default CartCounterIcon

方案2：Context API（适合中大型项目，避免props层层传递） #

创建全局购物车上下文，所有需要访问购物车的组件直接消费上下文即可：

1. 新建src/context/CartContext.js：

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

const CartContext = createContext()

export function CartProvider({children}) {
  const [cart, setCart] = useState(() => {
    const data = localStorage.getItem('cart')
    return data ? JSON.parse(data) : []
  })

  useEffect(() => {
    localStorage.setItem('cart', JSON.stringify(cart))
  }, [cart])

  const addToCart = (product) => {
    setCart(prev => [...prev, product])
  }

  return (
    <CartContext.Provider value={{cart, addToCart, cartCount: cart.length}}>
      {children}
    </CartContext.Provider>
  )
}

export function useCart() {
  return useContext(CartContext)
}

2. 入口文件（比如index.js）用CartProvider包裹App组件：

import { CartProvider } from './context/CartContext'

ReactDOM.createRoot(document.getElementById('root')).render(
  <CartProvider>
    <App />
  </CartProvider>
)

3. 各组件直接消费上下文：

• MenuComponent.js不用接收props，直接调用useCart获取方法：

const MenuComponent = () => {
  const {cart, addToCart} = useCart()
  // 其余逻辑保持不变
}

• CartCounterIcon.jsx直接获取计数：

import React from 'react'
import { useCart } from '../../context/CartContext'

function CartCounterIcon() {
  const {cartCount} = useCart()
  return (
    <div style={countIcon.div}><p style={countIcon.p}>{cartCount}</p></div>
  )
}
// 其余样式保持不变

方案3：自定义事件监听（适合跨标签页同步场景） #

如果不想改动现有状态结构，可以通过自定义事件通知localStorage变更：

1. 修改cart.js新增事件触发方法：

export function getCartItems(){
    const data = localStorage.getItem("cart");
    if(!data) return [];
    return JSON.parse(data);
}

// 新增：存储购物车同时触发自定义事件
export function setCartItems(cart) {
  localStorage.setItem('cart', JSON.stringify(cart))
  window.dispatchEvent(new CustomEvent('cartUpdated'))
}

2. MenuComponent.js中替换存储逻辑：

useEffect(() => {
  setCartItems(cart) // 用新增的方法代替直接调用localStorage.setItem
},[cart])

3. CartCounterIcon.jsx监听事件更新本地state：

import React, { useState, useEffect } from 'react'
import { getCartItems } from '../../modules/cart'

function CartCounterIcon(props) {
  const [count, setCount] = useState(getCartItems().length)

  useEffect(() => {
    const updateCount = () => setCount(getCartItems().length)
    // 监听同页面购物车更新事件
    window.addEventListener('cartUpdated', updateCount)
    // 可选：监听原生storage事件实现跨标签页同步
    window.addEventListener('storage', (e) => {
      if(e.key === 'cart') updateCount()
    })
    return () => {
      window.removeEventListener('cartUpdated', updateCount)
      window.removeEventListener('storage', updateCount)
    }
  }, [])

  return (
    <div style={countIcon.div}><p style={countIcon.p}>{count}</p></div>
  )
}
// 其余样式保持不变

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