当前位置：首页 > news >正文

useState为异步，测试一下编码时候是否考虑？

news 2025/6/25 16:30:49

private markBotMessageAsFinished(success: boolean, status: ChatMessage['status'], finalContent?: string) {if (this.botMessageId) {this.handler.setHistoryContent(prev =>{console.log(prev);const updated=prev.map(msg =>{/*  console.log(msg.id);console.log( this.botMessageId) */return msg.id === this.botMessageId? {...msg,isStreaming: false,status,content: finalContent ?? msg.content}: msg})console.log(updated);return updated;});this.botMessageId = null;}}

为什么执行：msg.id === this.botMessageId，始终为false，打印发现 this.botMessageId为null了，出现这种该情况只有setHistoryContent为异步（useStae）！！！，果然AI没识别出来，一个点卡死整个功能异常

 const [aiMessages, setAiMessages] = useState<ChatMessage[]>([]);// Memoize the MessageService instance using useRefconst messageService = useRef(new MessageService({setHistoryContent: (updater) => {setAiMessages(updater); // updater is a function that takes prev state and returns new state},onMessage: (type, content) => {if (type === 'success') message.success(content);if (type === 'error') message.error(content);},onStreamStart: () => { // Add new callback for stream startconsole.log("AIDialogContent: onStreamStart called. Setting isStreamingMessage to true.");setIsStreamingMessage(true);setLoading(true); // Ensure overall loading is true},onStreamCompleteOrError: () => {console.log("AIDialogContent: onStreamCompleteOrError called. Setting isStreamingMessage to false.");setIsStreamingMessage(false);setLoading(false); // Set overall loading to false when SSE connection closes (naturally, error, or manual stop)},setLastSuccessfulUserQuery: (query) => {setLastRequestContent(query);},esInstance: esWrapperInstance, // Pass the singleton EventSourceWrapper instance})).current; // Access .current immediately to get the instance

很好，你已经非常接近问题本质！让我们仔细理一理这个代码片段：

private markBotMessageAsFinished(success: boolean, status: ChatMessage['status'], finalContent?: string) {if (this.botMessageId) {// ⚡️ 在进入时 botMessageId 还有值const id = this.botMessageId;// ✅ 将 id 保存到局部变量this.handler.setHistoryContent(prev => {const updated = prev.map(msg => {return msg.id === id? {...msg,isStreaming: false,status,content: finalContent ?? msg.content}: msg;});return updated;});}this.botMessageId = null;
}

🔍 对这个异步性的疑问

setHistoryContent() 在多数情况下是同步调用同步更新状态，而非异步。
- 在 React 中，setState() 是异步批处理。
- 在其他框架中，它也可能是同步或者异步。
- 如果是 React，这里是同步调用更新器函数，只是最终 state 更新是异步批处理。所以：
  - 更新器中的代码是同步构建新值。
  - 更新器里面的 id 在进入 setHistoryContent() 时已经确定好了。
- 即使后面因为某些原因 this.botMessageId 修改为 null，也不影响已经捕获在局部变量中的 id 值。

✅ 简而言之

进入 markBotMessageAsFinished() 时，this.botMessageId 是有值的。
在进入 setHistoryContent() 前，你已经用 const id = this.botMessageId 将值保存。
即使后面 this.botMessageId = null 执行了，也不会改变已保存到局部变量 id 中的值。
在 setHistoryContent() 执行映射时，msg.id === id 始终成立，不会因为后续 this.botMessageId = null 改变行为。

⚡️ 结论

❌ 这种情况下，不是因为异步导致检查失败。
✅ 原因通常是因为：

markBotMessageAsFinished() 被调用了两次。
第一次调用修改好了状态。
第二次调用进入时，this.botMessageId 已经是 null，导致后续没有修改。

即使是同步调用，后续调用也是受第一次调用修改状态影响。

⚡️ 最佳实践建议

完全没必要因为异步而额外保存 id，但现在保存也是安全和标准做法。
检查是否因为调用链 (handleEnd()、onStreamCompleteOrError()) 重复调用。

增加保护标记，例如：

private finished = false;private markBotMessageAsFinished(success: boolean, status: ChatMessage['status'], finalContent?: string) {if (this.finished) {console.warn("markBotMessageAsFinished called multiple times");return;}this.finished = true;if (this.botMessageId) {const id = this.botMessageId;this.handler.setHistoryContent(prev =>prev.map(msg =>msg.id === id? {...msg,isStreaming: false,status,content: finalContent ?? msg.content,}: msg));}this.botMessageId = null;
}