Rails中render渲染内容重复追加而非替换的问题排查

问题现象 #

跟随Rails官方入门教程实现文章表单验证时，提交不符合规则的表单后，@article.save返回false，执行render :new本应重新渲染新建页面并展示错误信息，但实际出现新建页面内容追加在原页面下方的重复显示问题。

控制器代码如下：

def new
  @article = Article.new
end

def create
  @article = Article.new(article_params)

  if @article.save
    redirect_to @article
  else
    render :new, status: :unprocessable_entity
  end
end

核心原因及解决方法 #

1. 模板未正确使用应用布局 #

这是最常见的原因：

• 检查app/views/articles/new.html.erb，确保模板仅包含表单相关内容，不要写完整的<html>/<body>标签——这些结构应该由app/views/layouts/application.html.erb统一提供，模板内容通过布局中的<%= yield %>插入。
• 正确的模板示例：

<h1>New Article</h1>

<%= form_with model: @article do |form| %>
  <% if @article.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@article.errors.count, "error") %> prohibited this article from being saved:</h2>
      <ul>
        <% @article.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :text %>
    <%= form.text_area :text %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

<%= link_to 'Back', articles_path %>

2. Turbo响应异常 #

Rails默认启用Turbo，若表单提交后服务器返回的HTML不符合Turbo的预期，会导致内容叠加：

• 临时测试可在表单中禁用Turbo：

<%= form_with model: @article, data: { turbo: false } do |form| %>

• 长期解决需确保模板和布局符合Rails规范，让Turbo能正确处理页面渲染逻辑。

3. 布局文件缺失关键结构 #

检查app/views/layouts/application.html.erb，确保包含<%= yield %>标签，该标签负责将模板内容插入到布局的正确位置：

<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
</head>

<body>
  <%= yield %>
</body>
</html>

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