Home#index页面出现NameError及数据重复显示问题求助

问题现象 #

• 首页展示帖子时触发NameError in Home#index错误
• 列表可显示，但布局中存在数据重复渲染的问题

问题分析 #

1. 数据重复原因

   • 在index.html.erb中，遍历全局集合@stories，为每个元素渲染_stories_list局部视图并传递stories_list变量
   • 但_stories_list.html.erb中再次遍历全局的@stories集合，导致每个stories_list卡片重复渲染所有内容
   • 冗余代码(0...1).each do...end无实际作用，仅执行一次循环，可直接删除

2. NameError原因

   • _story.html.erb中使用了未定义的@list变量，且错误地使用list变量，而渲染该局部时传递的变量名是story

修复方案 #

1. 优化Home Controller（可选） #

如果User模型与List模型已建立has_many :lists关联，可简化查询代码，同时处理current_user为空的情况：

def set_stories
  @stories = current_user ? current_user.lists : List.none
end

2. 修正Story List局部视图（_stories_list.html.erb） #

删除冗余循环，改为渲染当前传递的stories_list变量：

<div class="card d-flex flex-row align-items-center gap-3 px-3" style="width: 25rem; height: 7rem; overflow-x:scroll;" >
  <%= render 'story/story', story: stories_list %>
</div>

3. 修正Story局部视图（_story.html.erb） #

统一使用传递过来的story变量，替换未定义的@list和list：

<div class="d-flex flex-column justify-content-center align-items-center">
  <div class="col-lg-4 col-md-6 col-sm-8 p-3 mb-4 profile-post" style="height:20rem;position: relative">
    <%= link_to story do %>
      <div class="row">
        <% if story.file.attached? %>
          <% if story.file.image? %>
            <div class="img-fluid">
              <%= image_tag(story.file, class: "img-thumbnail rounded-circle border border-2 border-primary", style: "width: 3.5rem") %>
            </div>
          <% elsif story.file.video? %>
            <%= video_tag(url_for(story.file), class: "img-thumbnail rounded-circle border border-2 border-primary", style: "width: 3.5rem", autoplay: false, loop: false, muted: false, controls: true) %>
          <% end %>
        <% end %>
      </div>
    <% end %>
  </div>
</div>

4. 保持Index View（index.html.erb）不变 #

<div class="d-flex flex-column gap-3">
    <!-- Story Section Start -->
        <% @stories.each do |stories_list| %>
        <%= render 'story/stories_list', stories_list: stories_list %>
<% end %>
</div>

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