React 流式聊天界面常见问题与处理

React AI 聊天界面接上流式输出后，交互问题才开始显现。dev.to 上一篇教程集中处理自动滚动、消息局部更新、未闭合 Markdown、输入法误发送和手机键盘遮挡，并展示停止生成后保留已有回答的做法。示例使用作者团队维护的 Wingo UI，带有明确的产品立场。

目前能确认什么

教程让消息列表、消息组件、输入区、推理提示行和模型选择器共用消息类型。消息状态包括 pending、streaming、complete、stopped 和 error，用于驱动加载提示、操作按钮及无障碍播报。

滚动部分给出的规则很具体：读者在底部时跟随输出，向上滚动就退出跟随，发送消息或点击跳转按钮后再回到底部。作者还处理了一个容易遗漏的时序：向上滚轮事件发生时，scrollTop 可能尚未变化，因此要先响应用户意图。

流式更新时，示例只为目标消息创建新对象，其余消息保留引用。这有助于配合 React 的渲染优化，但仅靠对象更新方式，不能保证其他消息组件完全不重渲染。

停止按钮通过 AbortController 传递的 AbortSignal 中断请求，已接收内容继续保留，消息标记为 stopped。摘要还提到 Markdown 修复、输入法组合输入和移动端键盘适配，但现有节选没有展开具体实现。

我的判断

这份教程更适合拿来补聊天产品的交互验收项。

优先检查三个场景：翻看历史时是否被新内容拉回底部，中文输入法按 Enter 确认候选词时是否误发送，点击停止后已生成内容是否消失。这些问题都能直接影响日常使用。

还要区分前端停止接收与服务端停止生成。节选展示了浏览器请求取消，没有说明取消信号如何传到模型调用，也无法据此确认后端计算是否停止。Markdown 修复会不会改变最终内容、手机键盘适配覆盖哪些浏览器，同样需要完整实现或官方文档才能判断。