React Hooks中map函数内更新state后无法即时取值触发Alert怎么解决

解决代码 #

// 原有状态定义保留即可，如果你不需要在其他地方用到returnCount，可以直接删掉对应的useState定义
function displayalertBox(){
  // 本地直接统计符合条件的数量，避免依赖异步更新的state旧值
  const validCount = arrayList.filter(item => item.ItemDeliveryStatus === 4).length;
  // 直接用本地统计值做判断
  if(validCount === 4) {
    alert('alert as returncount is equal to 4');
  }
  // 如果业务需要保留returnCount状态，再加下面这行，不需要可以直接删除
  setReturnCount(validCount);
}

说明 #

1. React 的状态更新setReturnCount是异步批量执行的，调用后无法在当前函数执行上下文内拿到最新的returnCount值，因此你之前的逻辑会出现触发两次才生效的问题
2. 原代码中用map遍历循环调用setReturnCount会触发多次不必要的状态更新，直接单次统计数量后更新即可

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