Railsで非同期のコメント投稿機能作成中にエラー

Question

前提・実現したいこと

Ruby on Railsでオリジナルアプリを作成中の初学者です。

twitterのようなアプリのコメント投稿機能を非同期で処理にしたいのですがエラーが発生してそこから抜けられていません。

###　開発環境
docker
Rails 6.1.1
ruby ruby 3.0.0

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

非同期でコメントを投稿した後に投稿フォームのに入っている値を削除するコードを記述しました。
投稿後、目視では投稿フォームの値が消えているのですが、ブラウザの検証を覗いてみると入力した値が残っているという現象が起こっています。
その状態でブラウザをリロードせずに投稿フォームからコメントを連投しようとした際にルーティングエラーが発生し、コメントが投稿できないという現象が発生しております。

ターミナル:

Comment Create (2.0ms)  INSERT INTO `comments` (`content`, `user_id`, `post_id`, `created_at`, `updated_at`) VALUES ('あああ', 1, 12, '2021-03-09 10:39:38.848975', '2021-03-09 10:39:38.848975')
web_1  |   ↳ app/controllers/comments_controller.rb:13:in `create'
web_1  |   TRANSACTION (4.5ms)  COMMIT
web_1  |   ↳ app/controllers/comments_controller.rb:13:in `create'
web_1  |   Rendering comments/create.js.erb
web_1  |   Comment Load (1.5ms)  SELECT `comments`.* FROM `comments` WHERE `comments`.`post_id` = 12
web_1  |   ↳ app/views/comments/_comments.html.erb:4
web_1  |   Rendered comments/_comment_form.html.erb (Duration: 0.7ms | Allocations: 303)
web_1  |   Rendered comments/_comments.html.erb (Duration: 8.2ms | Allocations: 1473)
web_1  |   Rendered layouts/_flash_messages.html.erb (Duration: 0.4ms | Allocations: 40)
web_1  |   Rendered comments/create.js.erb (Duration: 12.7ms | Allocations: 1804)
web_1  | Completed 200 OK in 64ms (Views: 15.9ms | ActiveRecord: 11.7ms | Allocations: 7001)
web_1  |
web_1  |
web_1  | Started PATCH "/posts/12/comments/187" for 172.19.0.1 at 2021-03-09 10:50:16 +0000
web_1  | Cannot render console from 172.19.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
web_1  |
web_1  | ActionController::RoutingError (No route matches [PATCH] "/posts/12/comments/187"):
web_1  |

PATCHを参照しようとしてエラーが出ているということは、editアクションを参照しようとしているということでしょうか？
ちなみに、editアクション、ルーティングの作成はいたしておりません。

該当のソースコード

routes.rb

resources :posts do
    resources :comments, only: [:create, :destroy]
  end

ルーティング

 post_comments POST   /posts/:post_id/comments(.:format)                                                                comments#create
 post_comment DELETE /posts/:post_id/comments/:id(.:format)                                                            comments#destroy

comments/_comment_form.html.erb

<% if logged_in? %>
  <h3>コメントを投稿する</h3>
      <%= form_with(model: [@post, @comment], data: { remote: true } ) do |f| %>
      <div class="form-group">
        <%= f.text_area :content, class: "form-control", rows: 5 %>
        <%= button_tag type: "submit", class: "btn btn-success float-right mt-1" do %>
          <i class="far fa-comments"></i> コメント
        </div>
        <% end %>
      <% end %>
<% end %>

comments/comment.html.erb

<div id="comment">
  <div class="comment-wrapper border-top　mb-10">
    <h4 class="mt-5">コメント一覧</h4>
      <% @comments.each do |comment| %>
        <div>
          <div class="commented-user row">
          <% unless comment.user.blank?%>
              <img class="rounded-circle img-fluid" src="<%= gravatar_url(@user, { size:30}) %>" alt="">
              <p class="ml-2 mt-2"><%= comment.user.name %></p>
              <p class="ml-2 mt-2"> 投稿日:<%=comment.created_at.strftime('%Y/%m/%d') %></p>
          <% end %>
          </div>
          <div class="row comments">
            <%= simple_format(comment.content) %>
          </div>
          <div class="comment-delete-btn">
          <% if logged_in? %>
            <% if comment.user == current_user %>
              <%= link_to 'コメントを削除', post_comment_path(post_id: @post, id: comment.id), remote: true, method: :delete, data: { confirm: '削除しますか? '}, class: 'btn btn-sm btn-outline-danger'%>
            <% end %>
          <% end %>
          </div>
      <% end %>
    <%= render 'comments/comment_form'%>
  </div>
</div>

comments_controller.rb

class CommentsController < ApplicationController
  before_action :require_user_logged_in

 
  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.build(comment_params)
    @comment.user_id = current_user.id
    @comments = @post.comments
    @userf = @post.user_id
    @user = User.find_by(id: @userf)
    
    if @comment.save
      flash.now[:success] = 'コメントしました。'
    else
      flash.now[:success] = 'コメントできませんでした。'
    end
  end

  def destroy
    @post = Post.find(params[:post_id])
    @userf = @post.user_id
    @user = User.find_by(id: @userf)
    @comments = @post.comments
    @comment = Comment.find(params[:id])
    if @comment.destroy
      flash.now[:success] = 'コメントを削除しました。'
    else
      flash.now[:danger] = "コメント削除に失敗しました。"
      render :post
    end
  end


private

    def comment_params
        params.require(:comment).permit(:content)
    end
end

comments/create.js.erb

$('#comment').html("<%= j(render("comments/comments")) %>");
$("#comment_content").val("");
$('#flash-message').html("<%= j(render("layouts/flash_messages")) %>");
setTimeout("$('.alert-success').slideUp('slow')", 4000);

コメント投稿後のブラウザの検証（コメントのフォーム内は目視では値は何も入っておらず空の状態）

<textarea class="form-control" rows="5" name="comment[content]" id="comment_content">あああ</textarea>

試したこと

create.js.erbの$('#comment_content').val("");の記述方法を変えたり
comments/_comment_form.html.erbに直接スクリプトを記述したりしましたがだめでした。

どなたかご教授お願いいたします。

Answer 1

web_1  | ActionController::RoutingError (No route matches [PATCH] "/posts/12/comments/187"):

update しようとしてエラーになっています。
update になるのは、form_with で指定している @comment が保存済みだからです。

comments/create.js.erb で #comment を書き換えていますが、
この中で render 'comments/comment_form' としています。
ここで保存済みの @comment(def createの) が利用されているのでしょう。

以下のようにして@commentを保存してない状態にします。

def create
  ...
  if @comment.save
    @comment = Comment.new
  ...
...

もしくは、comments/comment.html.erb から comments/comment_form を追い出し、
comments/create.js.erb で書き換えられないようにします。
この方法だと、フォームに値は残るはずなので、別途クリアする処理が必要です。

Comments

[ray4322]

提示してくださった方法で無事解決し、より理解が深まりました。
誠にありがとうございます。