非同期処理 どの投稿のいいねを押しても最新の投稿に反映、またcounter_cache: :likes_countが反応していない

Question

前提・実現したいこと

プログラミング２ヶ月の初学者です、至らぬ点含め指摘していただけると幸いです。

現在作成中のSNSにいいね機能を追加実装しようとしています。
ボタンを押したらマークの色が変わり、カウント数に変動がある物を作りたいです。

現状はどの投稿のボタンを押しても１度目は最新の投稿のマークの色が変わり、それ以降に変化がなく、またカウント数はどこにも変動がありません。

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

Started DELETE "/posts/4/likes/%23%3CLike::ActiveRecord_Relation:0x00007fec95f83110%3E" for ::1 at 2020-12-10 02:00:25 +0900
Processing by LikesController#destroy as JS
  Parameters: {"authenticity_token"=>"1wHtAGSVjj28czHdRnnY9frfv6HZFSReq+HgIJJVGB7RuAp8MLplU4pKz3NvUcSOEoyBkmlS/6SaRTXhUgyk/g==", "post_id"=>"4", "id"=>"#<Like::ActiveRecord_Relation:0x00007fec95f83110>"}
  Post Load (0.4ms)  SELECT `posts`.* FROM `posts` WHERE `posts`.`id` = 4 LIMIT 1
  ↳ app/controllers/likes_controller.rb:22:in `set_post'
  User Load (0.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ app/controllers/likes_controller.rb:13:in `destroy'
  Like Load (0.4ms)  SELECT `likes`.* FROM `likes` WHERE `likes`.`user_id` = 1 AND `likes`.`post_id` = 4 LIMIT 1
  ↳ app/controllers/likes_controller.rb:13:in `destroy'
   (0.2ms)  BEGIN
  ↳ app/controllers/likes_controller.rb:14:in `destroy'
  Like Destroy (0.3ms)  DELETE FROM `likes` WHERE `likes`.`id` = 39
  ↳ app/controllers/likes_controller.rb:14:in `destroy'
  Post Update All (0.3ms)  UPDATE `posts` SET `posts`.`likes_count` = COALESCE(`posts`.`likes_count`, 0) - 1 WHERE `posts`.`id` = 4
  ↳ app/controllers/likes_controller.rb:14:in `destroy'
   (1.6ms)  COMMIT
  ↳ app/controllers/likes_controller.rb:14:in `destroy'
  Rendering likes/destroy.js.erb
  Like Load (0.4ms)  SELECT `likes`.* FROM `likes` WHERE `likes`.`post_id` = 4 AND `likes`.`user_id` = 1 LIMIT 1
  ↳ app/models/post.rb:6:in `like_user'
  Rendered likes/_like.html.erb (Duration: 2.2ms | Allocations: 1033)
  Rendered likes/destroy.js.erb (Duration: 2.5ms | Allocations: 1137)
Completed 200 OK in 17ms (Views: 2.5ms | ActiveRecord: 4.1ms | Allocations: 6591)

ターミナルにこのようなメッセージが残ったのみでステータスも２００となっていて原因が分からなくなってしまいました。

該当のソースコード

_like.html.erb

<% if user_signed_in? %>
        <% if post.like_user(current_user.id) %>
          <%= button_to post_like_path(like, post_id: post.id), method: :delete, id: "like-button", remote: true do %>
          <i class="fas fa-star"></i>
            <span>
              <%= post.likes_count %>
            </span>
           <% end %>
        <% else %>
        <%= button_to post_likes_path(post), id: "like-button", remote: true do %>
        <i class="far fa-star"></i>
          <span>
            <%= post.likes_count %>
          </span>
          <% end %>
        <% end %>
      <% else %>
      <i class="far fa-star"></i>
          <span>
            <%= post.likes_count %>
          </span>
<% end %>

create.js.erb

$("#like-button").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like, post: @post}) %>")

destroy.js.erb


$("like-button").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like, post: @post}) %>")

likes_contoroller

 before_action :set_post

  def create
    @like = Like.create(user_id: current_user.id, post_id: params[:post_id])
    @likes = Like.where(post_id: params[:post_id])
    @posts = Post.all
    
  end

  def destroy
    like = Like.find_by(user_id: current_user.id, post_id: params[:post_id])
    like.destroy
    @likes = Like.where(post_id: params[:post_id])
    @posts = Post.all
    
  end

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

end

posts.index.html.erb

<div class="row row-cols md-3">
  <% @posts.each do |post| %>
  <div class="card　d-flex justify-content-around m-5" style="width: auto; heigth: auto;">
  <div class="card-body border border-primary">
  
  
    <%= image_tag post.image, :width => '280', :height => '280'if post.image.attached? %> 
    
    
      <h4 class="card-title"><%= post.title %></h4>
      １位<p class="card-text"><%= post.rank1 %></p>
      ２位<p class="card-text"><%= post.rank2 %></p>
      ３位<p class="card-text"><%= post.rank3 %></p>
    

    <div class="btn-group">
          <button type="button" class="btn btn-5m btn-outline-secondary">
            <%= link_to '詳細', post_path(post.id) , method: :get %></button>
          <button type="button" class="btn btn-5m btn-outline-secondary">
            <%=link_to post.user.name, user_path(post.user.id)%></button>
    </div>

    <div id="likes_buttons_<%= post.likes_count %>">
        いいね<%= render partial:'likes/like', locals: { post: post, like: @likes } %>
    </div>


    
      <p class="card-text">
        <small class="text-muted"><%= post.updated_at %>
        </small>
      </p>

  </div>
  </div>
  <% end %>
  </div>

like.rb モデル

class Like < ActiveRecord::Base
  belongs_to :post, counter_cache: :likes_count
  belongs_to :user
end

post.rb モデル

class Post < ActiveRecord::Base
  has_one_attached :image
  belongs_to :user
  has_many :likes, dependent: :destroy
  def like_user(user_id)
    likes.find_by(user_id: user_id)
  end
end

試したこと

binding.pryをかけたところparamsが

ターミナル
<ActionController::Parameters {"authenticity_token"=>"gxBOFDsxRNsgEq0PQvSjA11efb+daxFe00BjrFNk8IaFqalobx6vtRYrU6Fr3L94tQ1DjC0syqTi5LZtkz1MZg==", "controller"=>"likes", "action"=>"create", "post_id"=>"1"} permitted: false>

となっていました。この先のアクションプランが見えず原因追及に至れませんでした。

補足情報（FW/ツールのバージョンなど）

https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2
こちらの記事を参考に実装を進めています

Answer 1

create/destroyのレスポンスで #like-button を書き換えていますが、
(destroyの方は like-button になってますが)
<% @posts.each do |post| %>の中でパーシャルを呼んでいるので、
同じページに複数の #like-button が存在する状態になっています。

それで最初に見つかった #like-button = 一番上にある最新のを書き換えているのでしょう。

この問題を解決するには#like-button-#{post.id}など#like-button を一意なものにします。

_likes.html.erb

<%= button_to post_like_path(like, post_id: post.id), method: :delete, id: "like-button-#{post.id}", remote: true do %>

_likes.html.erb

<%= button_to post_likes_path(post), id: "like-button-#{post.id}", remote: true do %>

create.js.erb

$("#like-button-<%= @post.id %>").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like, post: @post}) %>")

destroy.js.erb

$("#like-button-<%= @post.id %>").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like, post: @post}) %>")

Comments

[Pro01x19]

回答ありがとうございます！
そのような仮説が立つことと、それに対するわかりやすいアクションプラン、非常に助かりました！

書き換えてみたところ、以前起こっていた一番最初に見つかった物に反映する。と言った挙動がなくなり、リロードをするまで反映することがなくなりました。ステータスも200のままなので自分でもう少しコードを書き換えるなどをして仮説立てを頑張ってみたいと思います

[neko_daisuki]

ごめんなさい。create/destroy.js.erbの書き方が間違っていましたので修正しました。