React中使用setState函数式写法处理流式响应出现乱序问题

你的问题核心出在TextDecoder的使用方式和不必要的setState等待上，下面是具体的修复方案和原因：

问题分析 #

1. 字符解码错误导致的"乱序"假象：你每次循环都新建一个TextDecoder，且没有启用流模式，当多字节字符（比如中文、emoji）被拆分到两个chunk时，单独解码会出现乱码，看起来像是内容顺序错乱。
2. 无效的await setState：React原生的setState（包括useState的更新函数）不返回Promise，await setResponseText完全没用，反而可能干扰循环的执行节奏。

修正后的代码 #

const response = await fetch('/dostuff', {
  method: 'POST',
  body
});

const reader = response.body!.getReader();
const decoder = new TextDecoder('utf-8', { stream: true }); // 启用流模式的解码器
let done, value;

while (!done) {
  ({ value, done } = await reader.read());
  if (done) {
    // 处理最后剩余的字节
    const finalStr = decoder.decode();
    setResponseText(prev => prev + finalStr);
    return;
  }
  const strval = decoder.decode(value, { stream: true });
  // 直接用函数式更新状态，不需要await
  setResponseText(prev => prev + strval);
}

关键修复点 #

• 复用带流模式的TextDecoder：创建一个全局的解码器实例，启用stream: true，这样解码器会记住上一个chunk的未完成字符，在下一次解码时拼接完整，避免乱码。
• 移除await setState：原生React状态更新是异步的，但函数式更新prev => prev + strval能保证每次都基于最新的状态更新，不需要等待更新完成再执行下一次循环。
• 循环结束时的收尾解码：当读取完成时，需要再调用一次decoder.decode()来处理最后可能残留的未完成字符。

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