【Ruby on Rails】いいね機能のハートマークが投稿した記事の数だけ複数表示されてしまう

Question

実現したいこと

ポートフォリオとしてRailsでActionTextを使用したブログアプリを製作中です。
投稿した記事に対していいねができるようにいいね機能を実装しました。

[Rails]いいね機能の非同期での実装!!!

こちらの記事を参考に実装し、動作は問題なくするようにできました。
しかし一つの記事に投稿した記事の数だけハートが表示されてしまいます。

例えば４つの記事があれば各記事にハートが４つ表示される具合です。
それを通常の一つにしたいです。

###前提条件
いいね機能の実装の為にlikes_tableを作成し、カラムはuser_idとpost_idです。
追加したその他のカラムはusersテーブルにlikes_countカラムを追加しています。

いいね機能部分のコード

likes_table

class CreateLikes < ActiveRecord::Migration[5.0]
  def change
    create_table :likes do |t|
      t.integer     :user_id
      t.integer     :post_id
      t.timestamps
    end
  end
end

アソシエーション

like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :post, counter_cache: :likes_count
end

post.rb

class Post < ApplicationRecord
  has_rich_text :content
  has_one_attached :image
  belongs_to :user
  has_many :comments
  has_many :likes, dependent: :destroy
  has_many :liking_users, through: :likes, source: :user
##以下略

end

user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,:recoverable, :rememberable

        has_many :posts, dependent: :destroy
        has_many :comments, dependent: :destroy
        has_many :likes, dependent: :destroy
        has_many :like_posts, through: :likes, source: :post
##以下略
end

###ルーティングの設定

  post   '/like/:post_id' => 'likes#like',   as: 'like'
  delete '/like/:post_id' => 'likes#unlike', as: 'unlike'

###コントローラー
likes_controller.rb

class LikesController < ApplicationController
  before_action :set_valiables

  def like
    like = current_user.likes.new(post_id: @post.id)
    like.save
  end

  def unlike
    like = current_user.likes.find_by(post_id: @post.id)
    like.destroy
  end

  private

  def set_valiables
    @post = Post.find(params[:post_id])
    @id_name = "#like-link-#{@post.id}"
  end
  
end

posts_controller.rb

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit]
  before_action :move_to_index, except: [:index, :show, :search]


  def index
    @posts = Post.includes(:user).order("created_at DESC")
  end

  def show
    @posts = Post.includes(:user).order("created_at DESC")

    @comment = Comment.new
    @comments = @post.comments.includes(:user).order("created_at DESC")
  end


  def new
    @post = Post.new
  end


  def edit
  end

  def create
    @post = Post.new(post_params)
    if @post.valid?
      @post.save
        redirect_to root_path
      else
        render :new 
      end
  end

  def update
    @post = Post.find(params[:id])
  if @post.update(post_params)
    redirect_to root_path
  else
    render :edit
  end
  end

  
  def destroy
    post = Post.find(params[:id])
    if post.destroy
      redirect_to root_path
    else
      render :show
    end
  end

  def search
    @posts = Post.searchtext(params[:keyword])
  end

  private
    def set_post
      @post = Post.find(params[:id])
    end

    def post_params
      params.require(:post).permit(:title, :content, :image).merge(user_id: current_user.id)
    end
    
    def move_to_index
      unless user_signed_in?
      redirect_to action: :index 
      end
    end
end

##viewの部分テンプレート
views/posts/index.html.erb

<% @posts.each do |post| %>
    <div class="card mb-4">
      <%= image_tag post.image.variant(resize:'600x300'), class: "card-img-top" %>
        <h2 class="card-title"><%= post.title %></h2>
        <p class="card-text"></p>
        <p>
        <%= strip_tags(post.content.to_s).gsub(/[\n]/,"").strip.truncate(20)%>
        </p>
    <div class="d-inline-flex">
      <a href="/users/<%= post.user.id %>", class="h5", style="text-decoration: none">
        <%= post.user.nickname %>
      </a>
        <%= render partial: 'posts/posts', collection: @posts, as: :post %>
    </div>
    
        <div class="field">
      <%= link_to '詳細ページ', post, class: "btn btn-outline-secondary form-control" %>
      </div>
      <div class="card-footer text-muted">
      投稿日時：
      <%= post.created_at.to_s(:datetime_jp) %>
      </div>
    </div>
  <% end %>

views/posts/__posts.html.erb

<%= render 'likes/like', post: post %>

views/likes/_like.html.erb

<% if user_signed_in? %>
<div class="like-link" id="like-link-<%= post.id %>">
  <% if current_user.likes.find_by(post_id: post.id) %>
    <%= link_to unlike_path(post.id), method: :delete, remote: true do %>
        <div class = "iine__button"><i class="fa fa-heart unlike-btn"></i>
        <%= post.likes.count %>
        </div>
    <% end %>
  <% else %>
    <%= link_to like_path(post.id),  method: :post, remote: true do %>
        <div class = "iine__button"><i class="fa fa-heart like-btn"></i>
        <%= post.likes.count %>
        </div>
    <% end %>
  <% end %>
</div>
  <% else %>
  <i class="fa fa-heart unlike-btn"></i>
  <%= post.likes.count %>
  </div>
<% end %>

views/likes/like.js.erb

$("<%= @id_name %>").html('<%= escape_javascript(render("likes/like", post: @post  )) %>');

views/likes/unlike.js.erb

$("<%= @id_name %>").html('<%= escape_javascript(render("likes/like", post: @post  )) %>');

試したこと

初めは原因としてindex.html.erbで記事の表示にeach文を使ってので表示も繰り返してしまっているのかと思いましたが、記事を一つしか表示しない詳細ページでも同じように表示されてしまった。

なかなか解決できずに困っております、どなたか解決策を教えてください。
よろしくお願い致します。

Answer 1

自己解決いたしました。
views/posts/index.html.erbを以下のように変更したところ表示の不具合は直りました。

###変更前

<%= render partial: 'posts/posts', collection: @posts, as: :post %>

###変更後

<%= render partial: 'posts/posts',  locals: { post: post } %>