Stimulus ajax:response 未返回服务器响应数据

Question

我正在启动一个新的 Rails 7 应用程序，最近发现我们不能再使用 ujs :( 我发现了一个名为 mrujs 的插件，它可以正常工作，可以将我的表单远程发送到服务器。我也在使用 stimulus 来处理页面上的各种 javascript 功能。

我遇到的问题是我在 ajax:success 进程不可迭代后的回复：

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

下面是我的HTML、Rails和刺激代码：

HTML

<%= form_with model: Article.new, html: { data: { remote: true, type: "html", "action": "ajax:success->modal-forms#onPostSuccess ajax:error->modal-forms#onPostError" } } do |f| %>
  <%= f.label :title, "Article Title" %>
  <%= f.text_field :title, class: "form-control" %>
  <%= f.submit "Save Article", class: "btn btn-primary" %>
<% end %>

Ruby / Rails

def create
  @article = Article.create(article_params)
  if @article.errors.any?
    render partial: 'error', article: @article, status: :bad_request
  else
    render @article
  end
end

此 returns 一个基本的 html 页面，将被插入页面内的另一个位置。

<li><%= @article.title %></li>

刺激行动

onPostSuccess(event) {
  event.preventDefault()
  const [data, status, xhr] = event.detail
  // This is where I get the issue of 'Not Iterable'
}

event.detail 给了我不可迭代的错误。有谁知道如何让 rails 的回复格式化，以便 [data, status, xhr] 部分真正起作用？

如果为此需要 hotwire 或 turbo，一个示例将非常有用:)

谢谢埃里克

Answer 1

这可能不是正确的方法，但确实有效：

html

<div data-container="remote">
<%= form_with model: Person.new, html: { data: { "action": "submit->remote#submit" } } do |f| %>
    <%= f.text_field :first_name %>
    <%= f.submit :submit %>
  <% end %>
</div>

人rails控制者

def create
    @person = Person.new(person_params)
    if @person.save
      render json: @person
    else
      render partial: 'people/person', locals: { person: @person },  status: :unprocessable_entity
    end
  end

远程刺激控制器

submit(event) {
    event.preventDefault()

    fetch(event.target.action, {
      method: 'POST',
      body: new FormData(event.target),
    }).then(response => {
      console.log(response);
      if(response.ok) {
        return response.json()
      }

      return Promise.reject(response)
    }).then(data => {
      console.log(data)
    }).catch( error => {
      console.warn(error)
    });
  }

Stimulus ajax:response 未返回服务器响应数据

Stimulus ajax:response not returning the server response data

ajax

ujs

stimulusjs

hotwire-rails

ruby-on-rails-7