React循环内dispatch延迟执行致状态更新异常问题求助

React中useReducer的dispatch是异步批量执行的，你在linksBuffs循环里每次调用dispatch后，linkSkill状态并不会立刻更新。这就导致循环过程中所有linkSkill.filter(...)判断都基于初始的空数组，所有特性都会走add分支，而且所有dispatch会在整个循环结束后才批量执行，这就是你看到“循环走完但dispatch没执行”的原因。

不要依赖实时更新的state来做判断，而是先在内存中完成所有特性的统计，把每个特性对应的成员位置列表一次性整理好，再通过dispatch批量更新状态。这样既避开了异步状态的问题，也能减少不必要的重渲染。

代码修改 #

1. 重写linksBuffs函数 #

let linksBuffs = (team, callBack) => {
  if (team.length <= 1) return;

  // 内存中统计所有特性的成员位置
  const skillMap = {};
  for (let i = 0; i < team.length; i++) {
    const position = i + 1;
    team[i].links.forEach(elem => {
      if (!skillMap[elem]) {
        skillMap[elem] = {
          skill: elem,
          onPositions: [],
          description: linksFile[elem]
        };
      }
      skillMap[elem].onPositions.push(position);
    });
  }

  // 过滤出至少2名成员共享的特性（符合触发条件的）
  const validSkills = Object.values(skillMap).filter(skill => skill.onPositions.length >= 2);

  // 重置状态后批量添加有效特性
  callBack({ type: 'reset' });
  validSkills.forEach(skill => {
    callBack({ type: 'add', link: skill });
  });
}

2. 调整useEffect依赖 #

把依赖从team.length改成team，避免队伍成员变化但长度不变时不触发更新：

useEffect(()=>{
  linksBuffs(team, setLinkSkill);
},[team]);

3. 简化Reducer（可选） #

因为现在不需要分步更新特性，直接去掉update分支：

const reducer = (state, action) => {
  switch(action.type){
    case 'add':{
      return [...state, action.link];
    }
    case 'reset': {
      return [];
    }
    default: return state;
  }
}

• 内存统计完全同步，不需要依赖React状态的异步更新，循环过程中可以实时获取到已统计的特性
• 批量dispatch减少了React重渲染的次数，性能更优
• 直接过滤出符合触发条件（2人及以上共享）的特性，后续可以直接使用这些数据展示buff效果

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