React循环内调用setTransformedText后state未刷新如何解决？

问题根因 #

你遇到的问题是React useState 状态更新的固有特性导致的：
React会批量处理单次渲染周期内的所有状态更新请求，函数组件闭包捕获的transformedText始终是本次渲染的初始值，循环中每一轮替换都基于原始状态而非上一轮替换后的结果，因此只有最后一次替换会生效。

最优实现方案 #

不需要在循环内多次调用状态更新函数，先在本地变量中累积完成所有替换操作，再一次性更新状态即可，性能更高且逻辑更清晰：

const anonymyseByCategory = (phrasesByCategory, visible) => {
  // 本地变量累积所有替换结果，避免闭包捕获旧状态问题
  let finalText = transformedText;
  Object.values(phrasesByCategory).forEach(phrase => {
    const startIndex = phrase.start_char;
    const endIndex = phrase.end_char;
    const originalSlice = text.substring(startIndex, endIndex);
    const targetSlice = visible 
      ? originalSlice 
      : 'X'.repeat(originalSlice.length);
    finalText = replaceAt(
      finalText, 
      finalText.substring(startIndex, endIndex), 
      targetSlice, 
      startIndex, 
      endIndex
    );
  })
  // 所有替换完成后一次性更新状态，仅触发一次重渲染
  setTransformedText(finalText);
}

特殊场景补充说明 #

如果你确实需要在每一轮迭代后获取最新的文本值做其他业务逻辑处理，可以使用useRef同步存储最新的文本值，每次替换后同时更新ref和state即可，不需要依赖状态更新的异步返回结果。

内容的提问来源于stack exchange，提问作者Piotr Żak