useEffect无限循环问题求助：从localStorage同步state刷新UI

你的代码出现无限循环的核心原因是：将chatLog作为useEffect的依赖项，每次调用setChatLog更新chatLog状态后，都会触发useEffect重新执行；而useEffect内部又再次调用setChatLog，形成了闭环循环。

下面是两种解决方案，按需选择：

方案一：仅组件挂载时加载一次数据 #

如果只需要在组件初始化时从localStorage加载聊天记录，后续不会通过其他页面/组件修改localStorage中的chatLog，可以将useEffect的依赖设为空数组，让它仅在组件挂载时执行一次：

const [chatLog, setChatLog] = useState([]);

useEffect(() => {
  const savedChatLog = localStorage.getItem("chatLog");
  // 避免JSON.parse解析null报错
  if (savedChatLog) {
    setChatLog(JSON.parse(savedChatLog));
  }
}, []); // 空依赖数组，仅执行一次

组件会在chatLog状态更新时自动刷新UI，因为React的状态变更会触发组件重渲染。

方案二：监听localStorage的变化 #

如果需要在其他页面/组件修改localStorage中的chatLog时，当前组件也能同步更新状态，可以监听浏览器的storage事件：

const [chatLog, setChatLog] = useState([]);

useEffect(() => {
  // 初始化加载数据
  const savedChatLog = localStorage.getItem("chatLog");
  if (savedChatLog) {
    setChatLog(JSON.parse(savedChatLog));
  }

  // 监听storage变化
  const handleStorageUpdate = (event) => {
    if (event.key === "chatLog") {
      setChatLog(JSON.parse(event.newValue));
    }
  };

  window.addEventListener("storage", handleStorageUpdate);

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    window.removeEventListener("storage", handleStorageUpdate);
  };
}, []);

注意：storage事件仅在其他标签页/窗口修改localStorage时触发，如果是当前页面内修改localStorage，需要在修改后直接调用setChatLog同步状态。

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