Rails Turbo Frame已更新但浏览器页面未变更，求问题原因

核心问题与修复步骤 #

1. Fetch 请求未正确设置 Accept 头 #

Turbo 仅会处理 text/vnd.turbo-stream.html 类型的响应，你的 fetch 请求没有明确告知服务器接受该类型，导致 Turbo 无法识别并处理返回的流内容。

修改 JavaScript 请求代码，添加 Accept 头，并移除无效的 format 参数：

let formData = new FormData();
let CodeParams = {
  code_data: result.text,
  id: <%= @cart.id %>
};
formData.append("code_json_data", JSON.stringify(CodeParams));
fetch("update_receipt_number", {
  method: "post", 
  body: formData,
  headers: {
    "X-CSRF-Token": document.querySelector("[name='csrf-token']").content,
    "Accept": "text/vnd.turbo-stream.html" // 新增此头
  }
});
codeReader.reset();

2. Turbo Stream 响应中的注释干扰解析 #

你的 update_receipt_number.turbo_stream.erb 中的注释会被渲染到响应内容里，Turbo 在解析 <template> 内的 HTML 时，非标准的注释可能导致解析失败。

删除注释，简化模板：

<%= turbo_stream.replace :receipt_number do %>
  <%= render partial: 'carts/receipt_number', locals: {cart: @cart} %>
<% end %>

3. 局部视图变量引用不一致 #

你在 Turbo Stream 中通过 locals 传递了 cart 变量，但局部视图里仍使用 @cart 实例变量。虽然控制器中已赋值，但统一使用局部变量能避免作用域潜在问题：

修改 _receipt_number.html.erb：

<%= turbo_frame_tag :receipt_number do %>
  <%= t('scan') %> <%= t('cart.receipt_number') %>
  <h3><%= cart.receipt_number %></h3>
  <% if cart.receipt_number %>
    <%= button_to t('change'), clear_receipt_number_cart_path(id: cart.id), class: 'button warning', method: :patch %>
  <% end %>
<% end %>

验证 #

完成上述修改后，重新测试扫描提交流程：

• 确认服务器返回的响应 Content-Type 为 text/vnd.turbo-stream.html
• 检查浏览器控制台是否有 Turbo 相关报错
• 验证页面中的 Turbo Frame 能否正常更新

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