刺激控制器动作触发两次

Question

我是 StimulusJS 的新手，我只想在用户添加新的 post 时显示附加在其他 post 之后的 post 内容。一切似乎都正常，但 post 被附加了两次，所以看起来表单被提交了两次。

  <div data-controller="posts">
     <div data-target="posts.add">
     </div>
     <!-- this is from a rails partial but it's all inside the data-controller -->
     <%= form_with scope: :post, url: posts_path, method: 'post', data: { action: "post#addBody" } do |form| %>
     <%= form.text_field :content, class: "form-control", data: { target: "posts.body"} %>
     <%= form.submit class: "btn btn-primary" %>
  </div>

实际控制人：

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["body", "add"]

  addBody() {
    let content = this.bodyTarget.value;
    this.addTarget.insertAdjacentHTML('beforebegin', `<div>${content}</div>`);
  }
}

我知道这是可行的，因为它在表单提交时在页面上显示了 post，但是再次调用该函数并且 post 出现了两次。我已经用 debugger 试过了，似乎 Stimulus 内部的某些东西正在第二次调用 addBody()？

作为上下文，这就是 posts_controller 正在做的事情：

  def create
    @post = current_user.post.build(post_params)

    respond_to do |format|
      if @post.save
        format.json {head :ok}
      else
        raise ActiveRecord::Rollback
      end
    end

  end

Answer 1

所以我知道默认情况下，表单应该监听 submit 事件，因此您不需要包含事件名称（参见 here for event shorthands），但我想知道是否因为它是一个带有 remote: true 的表单然后它也在监听 ajax:success 事件。如果您尝试将数据操作更改为仅侦听 ajax:success 事件，是否可以解决问题？

data: { action: "ajax:success->post#addBody" }

P.S 我知道这是一种推测性答案，因此可能需要评论而不是答案，但我没有发表评论的声望点数。

Answer 2

原来问题出在我的 application.js 文件中。我有：

const application = Application.start()
const context = require.context("../controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

import "controllers"

我不知道这条线：import "controllers" 是如何到达那里的，或者我认为它做了什么，但是在删除它之后，事情只触发了一次。

刺激控制器动作触发两次

Stimulus controller action firing twice

ruby-on-rails

stimulusjs