时间戳

首页 > 解决方案 > 为什么 Rails 6 Stimulus Reflex 会重新渲染具有重复内容的页面？

ruby-on-rails - 为什么 Rails 6 Stimulus Reflex 会重新渲染具有重复内容的页面？

问题描述

我一直致力于在现有的 Rails 6 应用程序中启动和运行 Stimulus Reflex。成功！我有几个反应在行动，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

标签： ruby-on-railsturbolinksactioncablestimulusjsstimulus-reflex

解决方案

在使用新内容更新页面时，StimulusReflex 似乎无法成功识别现有表单元素。尝试向表单元素添加一个唯一的 id。

此外，StimulusReflex 将发出 JavaScript 控制台消息以帮助您进行调试，但这需要显式启用。参见：https ://docs.stimulusreflex.com/troubleshooting#logging

请加入我们的 Discord，在那里您会发现很多有用的帮助。https://discord.gg/xFqhV5

推荐阅读