如何在useEffect中更新useState且避免重复触发？

问题回顾 #

在简易CRUD应用中，试图通过localStorage为每个浏览器实例初始化帖子数据时遇到两个核心问题：

1. useEffect内调用useState更新函数后，状态无法同步到外部作用域；单独提取更新函数调用也无效。
2. 添加依赖项的写法会触发两次状态更新（已关闭React严格模式），控制台输出初始值与localStorage存储值，且曾尝试将状态更新函数加入依赖，虽生效但仍会触发两次事件。

非hack式解决方法 #

1. 直接用localStorage初始化useState（推荐） #

localStorage是同步API，可在useState初始化时直接读取数据，无需依赖useEffect，从根源避免状态传递与重复更新问题：

const [postCount, setPostCount] = useState(() => {
  const storedVal = localStorage.getItem('postCount');
  // 存在则转成数字，否则用默认值0
  return storedVal ? Number(storedVal) : 0;
});

组件挂载时直接完成状态初始化，状态会同步到整个组件作用域，不会出现更新两次的情况。

2. 挂载时仅执行一次的useEffect #

如果必须在useEffect中处理（比如配合异步逻辑），使用空依赖数组确保useEffect仅在组件首次挂载时执行：

const [postCount, setPostCount] = useState(0);

useEffect(() => {
  const storedVal = localStorage.getItem('postCount');
  if (storedVal) {
    setPostCount(Number(storedVal));
  }
}, []); // 空依赖 = 仅挂载时执行一次

之前的两次更新是因为依赖项Variable在组件渲染时发生变化，导致useEffect重复触发。空依赖数组从根本上避免了重复执行。

3. 避免闭包陷阱（状态更新后外部无法获取的修复） #

如果状态更新后外部无法读取最新值，大概率是闭包导致的过时状态引用，可使用函数式更新确保获取最新状态：

// 函数式更新，prevCount是当前最新状态值
setPostCount(prevCount => {
  const stored = Number(localStorage.getItem('postCount'));
  return stored || prevCount;
});

这种写法不会受闭包影响，始终基于最新状态进行更新，确保外部能获取到最新值。

为什么之前的写法会触发两次更新？ #

当你把Variable加入useEffect依赖时，Variable会在组件每次渲染时重新计算（比如重新读取localStorage），状态更新后组件重新渲染，Variable的值变化会再次触发useEffect，形成循环更新，导致两次输出。

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