React非Props组件传值问题：LocalStorage无法触发Multiplier组件更新

核心问题拆解 #

1. Counter组件的localStorage同步错误
   • 原代码中useEffect仅在组件挂载时执行，未监听counter变化，后续点击按钮时手动存储localStorage会因setCounter的异步特性导致闭包值不一致，存储结果错误。
2. Multiplier组件无法感知localStorage变化
   • 原useEffect依赖multiple，触发死循环，且逻辑为累积相乘，不符合“同步显示当前counter值乘以固定数”的需求；同时未监听localStorage变更，无法触发重新渲染。

修复后的代码 #

Counter.js #

import { useState, useEffect } from 'react'
import Multiplier from './components/Multiplier'

const Counter = () => {
  const [counter, setCounter] = useState(1)

  // 监听counter变化，同步到localStorage并派发更新事件
  useEffect(() => {
    localStorage.setItem('count', counter)
    window.dispatchEvent(new CustomEvent('countUpdated', { detail: counter }))
  }, [counter])

  const funcIncr = () => {
    setCounter(prev => prev + 1)
  }

  const funcDecr = () => {
    setCounter(prev => prev - 1)
  }

  return (
    <div className=''>
      <button onClick={funcIncr}>+</button>
      <div id='count'>{counter}</div>
      <button onClick={funcDecr}>-</button>
      <Multiplier />
    </div>
  )
}

export default Counter

Multiplier.js #

import { useState, useEffect } from 'react'

const Multiplier = () => {
  // 初始化时从localStorage读取count，计算初始值
  const initialCount = localStorage.getItem('count') || 1
  const [multiple, setMultiple] = useState(-5 * Number(initialCount))

  // 监听自定义更新事件
  useEffect(() => {
    const handleCountUpdate = (e) => {
      setMultiple(-5 * e.detail)
    }
    window.addEventListener('countUpdated', handleCountUpdate)
    return () => window.removeEventListener('countUpdated', handleCountUpdate)
  }, [])

  // 监听跨页面的storage变化（可选）
  useEffect(() => {
    const handleStorageChange = (e) => {
      if (e.key === 'count') {
        setMultiple(-5 * Number(e.newValue))
      }
    }
    window.addEventListener('storage', handleStorageChange)
    return () => window.removeEventListener('storage', handleStorageChange)
  }, [])

  return (
    <div>Multiple: {multiple}</div>
  )
}

export default Multiplier

修复逻辑说明 #

• Counter组件：通过useEffect监听counter状态变化，自动同步到localStorage，并派发自定义事件countUpdated通知所有Multiplier组件更新。
• Multiplier组件：
  • 初始化时从localStorage读取初始值，避免加载时显示错误。
  • 监听自定义事件，收到更新通知后直接计算新的乘积值。
  • 可选监听storage事件，处理其他同源页面修改localStorage的场景。

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