React中使用Local Storage实现点赞按钮刷新后状态持久化问题咨询

原代码问题根源 #

React的状态更新是异步操作，调用setClicked之后立刻读取clicked变量，拿到的还是当前渲染周期的旧值，导致颜色设置逻辑不符合预期，最终存入LocalStorage的值是错误的，才会出现刷新后状态被重置的问题。同时维护clicked和color两个冗余状态也很容易出现同步异常。

修正后实现代码 #

import { useState, useEffect } from 'react';

function App() {
  // 直接用单个布尔状态维护点赞状态，初始化从LocalStorage读取
  const [isLiked, setIsLiked] = useState(() => {
    const saved = window.localStorage.getItem('isLiked');
    return saved ? JSON.parse(saved) : false;
  });

  // 点赞状态变化时自动同步到LocalStorage
  useEffect(() => {
    window.localStorage.setItem('isLiked', JSON.stringify(isLiked));
  }, [isLiked]);

  const handleClick = () => {
    setIsLiked(prev => !prev);
  };

  return (
    <div className="App">
      <div className="container">
        {/* 颜色直接通过点赞状态计算，不需要额外维护color状态 */}
        <button 
          style={{backgroundColor: isLiked ? 'red' : ''}} 
          onClick={handleClick} 
        > 
          +
        </button>
      </div>
    </div>
  );
}

export default App;

实现说明 #

• 只维护isLiked一个核心状态，减少冗余状态避免不同步问题，按钮的背景色直接通过状态值计算生成
• 初始化状态时直接从LocalStorage读取历史值，用JSON.parse处理是因为LocalStorage只能存储字符串类型，布尔值存入后会变为"true"/"false"，需要反序列化才能得到正确的布尔值
• 状态变化时自动同步到LocalStorage，刷新页面后会直接读取历史点赞状态，按钮颜色会保持对应状态

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