railsで投稿が重複して表示されてしまう

Question

前提・実現したいこと

railsでインスタグラム風のアプリを作っています。
投稿一覧ページを表示すると、投稿が二回表示されてしまいます。重複なく、表示したいです。

どなたか原因に心当たりのある方、教えていただけると幸いです。

発生している問題・エラーメッセージ

全画面は入りきらなかったのですが、画像ではクマの写真が二回出てきています。

＜現象詳細＞
三枚目の写真を投稿してみたところ、三種類の投稿が3回重複して表示されるようになりました。なので、計9個の投稿が投稿一覧ページにずらずらと並んでおります。。。

該当のソースコード

app/views/posts/index.html.erb

<% provide(:title, "投稿一覧")%>
<% if @search_posts %>

  <% @search_posts.each do |post| %>
    <%= render @posts %>
  <% end %>
  
<% else %>
  
  <% @posts.each do |post| %>
    <%= render @posts %>
  <% end %>
  
<% end %>

＊↑ransackで検索機能を付けているので、条件分けしています。検索して引っかかれば上側の条件に行きます。

app/views/posts/_post.html.erb
上記のファイルの render @postsの中身のファイルです

<div class="col-md-8 col-md-2 mx-auto">
  <div class="card-wrap">
    
    <div class="card">
      <div class="card-header align-items-center d-flex">
        <%= link_to user_path(post.user), class: "no-text-decoration" do %>
          <%= image_tag avatar_url(post.user), class: "post-profile-icon" %>
        <% end %>
        <%= link_to user_path(post.user), class: "black-color no-text-decoration",
          title: post.user.name do %>
          <strong><%= post.user.name %></strong>
        <% end %>
  
        <% if post.user_id == current_user.id %>
          <%= link_to post_path(post), method: :delete, class: "ml-auto mx-0 my-auto" do %>
            <div class="delete-post-icon">
            </div>
          <% end %>
        <% end %>
      </div>
      <%= link_to(post_path(post)) do %>
        <%= image_tag post.photos.first.image.url(:medium), class: "card-img-top" %>
      <% end %>
      <div class="card-body">
        <div class="row parts">
          <div id="like-icon-post-<%= post.id.to_s %>">
            <% if post.liked_by(current_user).present? %>
              <%= link_to "いいねを取り消す", post_like_path(post.id, post.liked_by(current_user)), method: :DELETE, remote: true, class: "loved hide-text" %>
            <% else %>
              <%= link_to "いいね", post_likes_path(post), method: :POST, remote: true, class: "love hide-text" %>
            <% end %>
          </div>
          <%= link_to "", "#", class: "comment" %>
        </div>
        <div id="like-text-post-<%= post.id.to_s %>">
          <%= render "like_text", { likes: post.likes } %>
        </div>
        <div>
          <span><strong><%= post.user.name %></strong></span>
          <span><%= post.caption %></span>
          <%= link_to time_ago_in_words(post.created_at).upcase + "前", post_path(post), class: "post-time no-text-decoration" %>
          
          <div id="comment-post-<%= post.id.to_s %>">
            <%= render 'comment_list', { post: post } %>
          </div>
          <%= link_to time_ago_in_words(post.created_at).upcase + "前", post_path(post),
            class: "light-color post-time no-text-decoration" %>
          <hr>
          <div class="row actions" id="comment-form-post-<%= post.id.to_s %>">
            <%= form_with model: [post, Comment.new], class: "w-100" do |f| %>
              <%= f.hidden_field :user_id, value: current_user.id %>
              <%= f.hidden_field :post_id, value: post.id %>
              <%= f.text_field :comment, class: "form-control comment-input border-0", placeholder: "コメント ...", autocomplete: :off %>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  
  before_action :configure_permitted_parameters, if: :devise_controller?
  before_action :set_search
  
  def set_search
   @search = Post.ransack(params[:q])
   @search_posts = @search.result
  end

  protected

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
      devise_parameter_sanitizer.permit(:account_update, keys: [:name])
    end
  
end

↑＊念のため、ransack周りのコード追加してみました。set_searchが検索用メソッドです。

Answer 1

多重ループになっています。

  <% provide(:title, "投稿一覧")%>
  <% if @search_posts %>

-   <% @search_posts.each do |post| %>
-     <%= render @posts %>
-   <% end %>
+   <%= render partial: 'post', collection: @search_posts %>

  <% else %>

-   <% @posts.each do |post| %>
-     <%= render @posts %>
-   <% end %>
+   <%= render @posts %>

  <% end %>

Comments

[sakana-suki]

おはようございます！回答ありがとうございます。うれしいです！

未熟でよくわからなくて恐縮なのですが、
多重ループになっている理由はIf文がうまく動いていないから、とかそういうことでしょうか？それともeachとrenderの使い方が間違っているということでしょうか？？

あともう一点あるのですが、

<% provide(:title, "投稿一覧")%>
<% if @search_posts %>

<%= render partial: 'post', collections: @search_posts %>

<% else %>

<%= render @posts %>

<% end %>

このように書き直してみたところ、エラーが出ました。
エラー文：
undefined local variable or method `post'
Did you mean? @posts

エラーがでている個所はパーシャルの6行目
<%= link_to user_path(post.user), class: "no-text-decoration" do %>
の（post.user）のところです。
（＊app/views/posts/_post.html.erb）

eachを使わずに、このエラーが出ないようにする方法が思いつかなず、こちらについても何かアドバイスを頂けるとありがたいです

[rhiroe]

> 多重ループになっている理由はIf文がうまく動いていないから、とかそういうことでしょうか？それともeachとrenderの使い方が間違っているということでしょうか？？

使い方を間違えているというより使い方をわかってないだけでしょう。
ドキュメント読んだりすれば理解できるようになると思います。
<%= render @posts %>が実際に何をやっているのか(何の省略形なのか)とかもわからないまま使っているのでは？

> このように書き直してみたところ、エラーが出ました。

修正しました。
collections ではなく collection でした。すみません。

[sakana-suki]

おお、動きましたー！ありがとうございます！

ご指摘いただきありがとうございます。
こちら↓を見つつMugheart様のコメント見つつ、やっと、ループ処理してるのか、、あっそうか、、！とストンと入ってきました。（遅い、、）
http://rochefort.hatenablog.com/entry/2016/09/29/070000

実は検索機能もちゃんと動いてなかった(当たり前。。)のですが、一緒に動くようになってうれしいです！

これからも勉強していきたいと思います。