🍫
【Ruby on Rails】【TurboStreams】リロードしないとコメント投稿できない問題を解決
はじめに
現在Ruby on Railsで個人開発を行なっております。
その中でコメント投稿機能を作成し、その内容を非同期で投稿できるようTurboStreamsを使用して実装を行なっています。
実装完了した際には気が付かなかったのですが、1回目投稿する際はリロードしないとコメントが投稿できない仕様になっておりました。（2回目以降は非同期でコメントが投稿される状態）
今回はなぜそのような問題が起きていたのか、記事にしたいと思います。
参考になりましたら幸いです。
前提
今回は表題の件のみ、記事にしております。
そのためコメント投稿機能の作成、およびその非同期処理化の方法には言及しておりません。
原因
参考文献に記載している記事から、問題を解決することができました。
今回この問題に遭遇して初めて知りましたが、form_withメソッドは、<table>で有効な要素ではないので置くことができないそうです。
(tableタグ、trタグ、tdタグも同様)
「tableタグ form_with」で検索すると、多くの記事がヒットします。
修正前コード
<table class="table">
<tbody id="comments">
<%= render 'comments/form', comment: @comment, article: @article %>
<%= render @article.comments, comment: @comment, commentfavorite: @commentfavorite %>
</tbody>
</table>
修正後コード
<%= render 'comments/form', comment: @comment, article: @article %>
<table class="table">
<tbody id="comments">
<%= render @article.comments, comment: @comment, commentfavorite: @commentfavorite %>
</tbody>
</table>
修正前コードは、tableタグ内で'comments/form'ファイルを呼び出しています。
このファイル内で、form_withメソッドを使用していたため、リロードしないとコメントが投稿できないようになっておりました。
最後に
今回のアプリ開発ではUX向上のため、随所にTurboStreamsを使用しています。
非同期処理は苦戦した部分が多く、これまでも他記事で非同期処理の実装に関してまとめていますが、
今回また新たな知見を手に入れることができました。
最後までお読みいただき、ありがとうございました。
Discussion