Railsのフォームの要素が増殖してしまう問題を解決したい

Question

前提

• 親モデルを登録した際に子モデルを一括登録するフォームを作っています
• slimを使っています
• Rails6系を使っています

現在Railsで親モデルのデータを1つ登録した際に、子モデルのデータを複数一括登録する機能を作っています。
子モデルの一括登録そのものはできたのですが、登録に失敗した時に新規登録ページを再描画する場面で不具合が起きています。

具体的には

• 新規登録の際（/logs/newへのアクセス）の際には正しく選択肢が表示される

• ↑の状態で何も選択しなかったり、日付や質問への答えを入力せずに登録するボタンを押すとエラーの処理が走るが、その際に再度/logs/newをレンダリングする動きがある。おそらくそこの動作のせいで、質問の後ろにあるはい、いいえの選択肢が増殖してしまう。（繰り返し増殖できてしまう）

実現したいこと

• 何も選択しなかったり、日付や質問への答えを入力せずに登録するボタンを押しても要素が増殖しないようにしたい

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

エラーメッセージは特にないですが、おそらく、下記のコードの @log.answers.build のbuildが複数回走ってしまっているのが原因かと思います...

該当のソースコード

  def new
    @user = current_user
    @log = Log.new
    @questions = Question.order(:id).where(is_active: true)
    @log.answers.build
  end

  def create
    @user = current_user
    @log = Log.new(log_params)
    @questions = Question.order(:id).where(is_active: true)
    
    begin
      @log.save! if @log.present?
      flash[:success] = '作成しました'
      redirect_to logs_path
    rescue StandardError => e
      logger.error(e)
      flash[:danger] = @log.errors.full_messages
      render :new
    end
  end

= form_with(model: log, url: url, local: true) do |f|
  = f.hidden_field :user_id, value: user.id
  / とりあえず固定値を渡す
  = f.hidden_field :score, value: 40
  .form-item
    = f.label :registered_on, '日付'
    = f.date_field :registered_on
  .form-item
    - questions.each do |question|
      = "#{question.content}"
      = f.fields_for :answers do |answer|
        = answer.hidden_field :question_id, value: question.id
        = answer.label :is_good_habit, 'はい'
        = answer.radio_button :is_good_habit, true
        = answer.label :is_good_habit, 'いいえ'
        = answer.radio_button :is_good_habit, false
  = f.submit '登録する'

試したこと

• view側でparamsなどを見て選択肢部分の表示をしないようにした（しかし、newページにアクセスした時も消えてしまうのでダメ）
• controller側で @log.answers.build の実行を paramsなどを見て行わないようにした（しかし上と同じ問題が起きてダメ）

Comments

[shinoharat]

下記5点を質問文に追加していただけないでしょうか？
・app/models/log.rb
・app/models/question.rb
・app/models/answer.rb
・db/schema.rb の logs, questions, answers 部分
・「log_params」の実装内容

Answer 1

バグの原因について

エラーメッセージは特にないですが、おそらく、下記のコードの @log.answers.build のbuildが複数回走ってしまっているのが原因かと思います...

いえ、原因はそこではありません。
まずは、この現象が起きている理由について解説させてください。

create アクションで保存に失敗した場合、以下のコードが実行されます。

    rescue StandardError => e
      ...
      render :new
    end

「render :new」は、現在のインスタンス変数の状態のままビューを描画します。
（new アクションを再度実行したりはしません）
ですので、create 失敗時に「@log.answers.build」が実行されることはありません。

--

では、なぜフォームが増殖してしまうのでしょうか？

原因は view の構造にあります。

= form_with(model: log, url: url, local: true) do |f|
  ...
  .form-item
    - questions.each do |question|  <----------------------- ここと
      = "#{question.content}"
      = f.fields_for :answers do |answer|  <---------------- ここに注目
        ...

f.fields_for :answers は @log.answers の要素の数だけフォームを生成します。
それを questions.each で囲っていますので、この書き方だと 『一つの質問につき、すべての @log.answers の数だけフォームを生成』 という動作になります。

初期表示では、まず new アクションの

  def new
    ...
    @log.answers.build
  end

が実行されるため、 @log.answers.count は１です。
そのため、『一つの質問につき、一つの回答フォーム』となり、一見うまく動作しているように見えます。

しかし、create に失敗したときはどうでしょうか？
登録ボタン押下時、フォームからは「質問１」と「質問２」の２つの回答情報が送信されます。
それを保存しようとするので、当然 @log.answers.count は２となります。（保存に失敗しても、DBに反映されないだけで、データは変数にセットされます）
そのまま view を描画すれば、『一つの質問につき、二つの回答フォーム』となり、今回のような現象が発生してしまいます。

修正方法

長くなってすみません。
ここからは修正方法について解説します。

まず、view から questions.each は取り除いてしまいます。
そして、質問文は「answer に紐づく question」から表示するようにします。
（後述しますが、 controller 側で answer と question の紐づけを行っています）

### view ###

    .form-item
-     - questions.each do |question|
-       = "#{question.content}"

       = f.fields_for :answers do |answer|
+         / ここでの answer は「フォーム変数」であり、Answer モデルのインスタンスではないので注意。
+         / 「フォーム変数.object」で紐づくモデルインスタンスを取得できる。
+         - answer_model = answer.object

+         / answer(モデル) に紐づく question から質問文を表示
+         = "#{answer_model.question.content}"

+         / question_id は controller で設定済み（後述）のため、value の記述が不要となる
-         = answer.hidden_field :question_id, value: question.id
+         = answer.hidden_field :question_id

          = answer.label :is_good_habit, 'はい'
          = answer.radio_button :is_good_habit, true
          = answer.label :is_good_habit, 'いいえ'
          = answer.radio_button :is_good_habit, false
    = f.submit '登録する'

次に、controller の new アクションを変更します。
answer を一つだけビルドするのではなく、question の数だけビルドするようにします。
view で質問文が表示できるよう、 question_id も設定します。

### controller ###

  def new
    @user = current_user
    @log = Log.new
-   @questions = Question.order(:id).where(is_active: true)
-   @log.answers.build
+   # 質問の数だけ answer をビルドする
+   questions = Question.order(:id).where(is_active: true)
+   questions.each do |question|
+     @log.answers.build(question_id: question.id)
+   end
  end

最後に、「answer に紐づく question」にアクセスするためのアソシエーションを追加します。
（既に定義済みならこの修正は不要です。）

### model ###

  class Answer < ApplicationRecord
+   belongs_to :question  # 無いなら追加
    ...
  end

以上です。
何かわからないことがあれば、またコメントください🙏