Почему Rails 6 Stimulus Reflex повторно отображает страницу с дублированным контентом?

Question

Я работал над тем, чтобы запустить Stimulus Reflex в существующем приложении Rails 6. Успех! У меня есть пара рефлексов в действии, ActionCable делает свое дело... все хорошо. Однако после того, как рефлекс успешен и Stimulus обменивается данными через ActionCable, страница обновляется на моих глазах дублированным контентом.

Форма ниже просто встречает рефлекс, который сохраняет объект формы. Как видите, страница некорректна после того, как Stimulus и / или Turbolinks повторно отрисовали форму. В этом случае он дважды отображает кнопку отправки формы.

Я не могу понять, почему это происходит, и надеюсь, что кто-то здесь видел эту проблему двойного рендеринга.

перед

после

HTML

    <%= block_card title: 'BILLING', footer: (link_to('Add Billing Detail', new_project_billing_detail_path(@project)) if policy(@project.billing_details.new).new?) do %>
      <%= @alert %>
        <%= form_with model: @billing_detail, html: { novalidate: true }, data: { reflex: "submit->BillingDetailReflex#submit" } do |form| %>
          <% if @billing_detail.errors.any? %>
            <% @billing_detail.errors.full_messages.each do |message| %>
              <%= tag.li message %>
            <% end %>
          <% end %>
          <div>
            <%= form.text_field :date, 
              placeholer: 'Date',
              required: true,
              data: { reflex: "change->BillingDetailReflex#submit" } %>

            <%= form.text_field :billing_code, 
              placeholer: 'Billing Code',
              required: true,
              data: { reflex: "change->BillingDetailReflex#submit" } %>

            <%= form.text_field :project_id %>
            <%= form.text_field :user_id, value: current_user.id %>
          </div>          
          <%= form.submit %>
        <% end %>
<% end %>

Рефлекс

# frozen_string_literal: true

class BillingDetailReflex < ApplicationReflex
  before_reflex do
    @billing_detail = BillingDetail.new
    @billing_detail.assign_attributes(billing_detail_params)
  end

  def submit
    if @billing_detail.save!
      @alert = "saved id:#{ @billing_detail&.id }"
    else
      @alert = 'NOT saved'
    end
  end

  private

  def billing_detail_params
    params.require(:billing_detail).permit(
      :date,
      :billing_cycle,
      :user_id,
      :project_id
    )
  end
end

Answer 1

Похоже, что StimulusReflex не смог успешно идентифицировать существующий элемент формы при обновлении страницы новым содержимым. Попробуйте добавить уникальный идентификатор к элементу формы.

Кроме того, StimulusReflex будет генерировать консольные сообщения JavaScript, чтобы помочь вам отладить, но это должно быть явно включено. СМОТРИ: https://docs.stimulusreflex.com/troubleshooting

Присоединяйтесь к нам в Discord, где вы найдете много полезных рук. https://discord.gg/xFqhV5