React项目localStorage增删后UI状态未更新第三次添加无响应如何修复

• 自定义Hook的localStorage操作直接写在渲染顶层，仅组件首次渲染时执行一次，后续调用setValue更新状态不会触发存储读写，是第三次点击无响应的核心原因
• 拆分了两个独立的存储/删除Hook，各自维护内部状态，状态同步逻辑冗余易出错
• 视图渲染直接读取非响应式的localStorage判断按钮状态，localStorage变更不会触发组件重渲染，导致按钮状态不更新
• 未对localStorage空值做兜底处理，首次访问无存储数据时JSON.parse会抛出异常

将两个重复的自定义Hook合并为统一的数组类型本地存储Hook，所有存储操作和响应式状态绑定，视图基于响应式状态渲染：

自定义Hook代码 #

// 专门处理数组类型的localStorage读写Hook
const useLocalStorageArray = (key: string, initialValue: string[] = []) => {
  // 初始化优先读取本地存储数据
  const [value, setValue] = useState<string[]>(() => {
    if (typeof window === 'undefined') return initialValue
    try {
      const storageData = window.localStorage.getItem(key)
      return storageData ? JSON.parse(storageData) : initialValue
    } catch (err) {
      console.error('读取本地存储失败:', err)
      return initialValue
    }
  })

  // 状态变更时自动同步到localStorage
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.localStorage.setItem(key, JSON.stringify(value))
    }
  }, [key, value])

  // 封装添加方法：自动去重、限制最多4条
  const addItem = (item: string) => {
    if (!item || value.includes(item) || value.length >= 4) return
    setValue(prev => [...new Set([...prev, item])])
  }

  // 封装删除方法
  const deleteItem = (item: string) => {
    setValue(prev => prev.filter(i => i !== item))
  }

  return { value, addItem, deleteItem }
}

组件内调用代码 #

// 组件内仅调用一次Hook即可
const { value: pokemonList, addItem: setPokemon, deleteItem: DPokemon } = useLocalStorageArray('pokemon', [])

// 视图基于响应式状态pokemonList判断，不要直接读localStorage
{pokemonList.includes(value.name) ?
  <p 
    className="compareTrue"
    data-name={value.name}
    onClick={(e: MouseEvent<HTMLParagraphElement>) => DPokemon(e.target.dataset.name!)}
  >{value.name} added to comparison! </p>
  :
  <p className="compareFalse"
    data-name={value.name}
    onClick={(e: MouseEvent<HTMLParagraphElement>) => setPokemon(e.target.dataset.name!)}
  >
    Compare {value.name} from another!
  </p>
}

// 原loadData逻辑监听pokemonList即可
useEffect(() => {
  loadData()
}, [pokemonList])

• 存储操作和响应式状态强绑定，状态更新自动同步到localStorage，不会出现读写时机错位的问题
• 视图基于响应式状态渲染，状态变更自动触发重绘，按钮状态实时同步
• 内置边界校验，避免空值报错、重复添加、超出数量限制的问题
• 合并冗余逻辑，维护成本更低

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