如何修复React应用中点击按钮后文本字段的显示延迟问题

你遇到的滞后问题确实是React状态更新的异步特性导致的：

• _rollCargo函数内部应该是调用了setResourcesIndex更新资源索引，但React状态更新是异步的，不会立即生效。
• 同一_generate函数里，紧接着的resourcesIndex == 5判断用的是更新前的旧状态值，而非_rollCargo刚生成的新索引。
• 第一次生成Wine/Brandy（索引5）时，resourcesIndex还是之前的旧值（比如-1），所以setWineQualityIndex被设为-1，品质不显示；第二次点击时，resourcesIndex已经更新为5，此时不管新生成的资源是什么，都会用旧的5来判断，导致错误显示品质。

方案一：直接使用新生成的资源索引（推荐） #

修改_rollCargo函数，让它返回新生成的资源索引，这样在_generate里可以直接用这个新值判断，无需依赖异步更新的状态：

// 修改_rollCargo，返回新的资源索引
function _rollCargo(roll: number): number {
  // 保留你原来的逻辑，计算出新的resourcesIndex
  const newResourcesIndex = ...; // 比如根据roll值计算得到的索引
  setResourcesIndex(newResourcesIndex);
  return newResourcesIndex;
}

function _generate(localCityIndex: int, localSeasonIndex: int ) {
    // 接收_rollCargo返回的新索引
    const newResourcesIndex = _rollCargo(getRandomInt(100));
    const currentWineQualityIndex = getRandomInt(6)-1;
    // 用新索引判断，而非旧状态值
    setWineQualityIndex(newResourcesIndex == 5 ? currentWineQualityIndex : -1);
}

方案二：用useEffect监听资源索引变化 #

如果不方便修改_rollCargo，可以通过useEffect监听resourcesIndex的变化，自动同步更新酒的品质状态：

import { useEffect } from 'react';

// 其他状态定义不变
const [resourcesIndex, setResourcesIndex] = useState(-1);
const [wineQualityIndex, setWineQualityIndex] = useState(-1);

// 监听resourcesIndex变化，更新wineQualityIndex
useEffect(() => {
  if (resourcesIndex === 5) {
    // 生成新的品质索引
    setWineQualityIndex(getRandomInt(6)-1);
  } else {
    // 非酒类资源，重置品质索引
    setWineQualityIndex(-1);
  }
}, [resourcesIndex]); // 依赖resourcesIndex，只有它变化时才执行

function _generate(localCityIndex: int, localSeasonIndex: int ) {
    // 只负责生成资源索引，品质状态由useEffect自动处理
    _rollCargo(getRandomInt(100));
}

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