React设置visibleItems后无法正常更新technologies状态问题

你遇到的问题和setState异步特性无关，是代码写法存在3个核心错误：

• 错误对同步执行的setVisibleItems使用await：React的setState本身不返回Promise，await不会产生等待状态更新完成的效果，属于无效写法。
• 无意义的async标记与闭包旧值问题：你把内部全是同步逻辑的getTechnologies定义为async函数，且没有用useCallback包裹就放到useEffect依赖数组中，每次组件重渲染都会生成全新的函数引用，不仅会导致effect意外重复触发，还容易拿到渲染闭包里的旧状态值。
• 初始执行时机拿到空状态：组件首次挂载时，visibleItems的初始值是空数组，第一次触发监听effect时计算得到的技术集合自然为空，后续因为函数引用变化导致的effect乱触发，没有正确拿到更新后的visibleItems值重新计算。

// 硬编码的固定常量allData不需要放到state中，直接使用即可
const [activeFilter, setActiveFilter] = useState("");
const [visibleItems, setVisibleItems] = useState([]);
// 状态初始值和实际存储类型对齐，使用空Set初始化
const [technologies, setTechnologies] = useState(new Set());

useEffect(() => {
  setActiveFilter(filters[0].text.toLowerCase());
  // 同步设置初始列表数据，删除无效的async包装和await
  setVisibleItems(allData);
}, []);

useEffect(() => {
  // 列表为空时跳过计算，避免生成空集合
  if (visibleItems.length === 0) return;
  const techSet = new Set();
  visibleItems.forEach(item => {
    item.technology.forEach(tech => techSet.add(tech));
  });
  setTechnologies(techSet);
  // 仅保留visibleItems作为依赖，避免引用变化导致的无效触发
}, [visibleItems]);

• 渲染technologies时需要先转成数组，React无法直接遍历渲染Set类型，使用[...technologies].map(...)即可正常遍历。
• 不要随意加eslint注释跳过React Hooks的依赖检查，绝大多数闭包旧值问题都是遗漏依赖导致的。
• 仅当内部有返回Promise的异步逻辑时，才需要将函数标记为async，不要给同步代码加无意义的async包装。

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