使用 Rails 和 Hotwire 提交表单时出错答案

【问题标题】：Error in Form Submisson with Rails and Hotwire使用 Rails 和 Hotwire 提交表单时出错
【发布时间】：2021-08-17 21:49:06
【问题描述】：

我正在使用 hotwire 运行 rails 6.1。我正在创建一个登录表单，获取电子邮件和密码，然后重定向到 store_index 路径。但是，我遇到了这个错误 - 错误：表单响应必须重定向到另一个位置。我试过以下事情，但得到同样的错误，

使用 format.html { redirect_to store_index_path}
我注释掉了 create 函数中的所有内容并添加了 puts "Hello"。但是，我仍然遇到同样的错误。

我现在很困惑，任何帮助

  <%= form_with url: retailer_log_in_path, class: 'box'  do |f| %>
    <div class="field">
        <%= f.label 'email:', class: "label"%><br>
        <%= f.text_field :email, class: "input" %>
    </div>
    <div class="field">
        <%= f.label 'password:' ,class: "label"%><br>
        <%= f.password_field :password, class: "input" %>
    </div>
    <div class="field">
        <%= f.submit 'Log In', class: "input" %>
    </div>
  <% end %>

会话控制器.rb

def create
        retailer = Retailer.find_by(email: params[:email])
        if retailer.present? && retailer.authenticate(params[:password])
            session[:retailer_id] = retailer.id 
            redirect_to store_index_path
        else
            flash.now[:alert] = 'Invalid email or password'
            render :new
        end
    end

【问题讨论】：

标签： ruby-on-rails ruby hotwire-rails

【解决方案1】：

如果您想使用 turbo drive 表单提交，您必须从控制器返回 4xx 或 5xx 响应代码以表示验证错误：

例如

render :new, status: :unprocessable_entity

在您的代码中，它应该如下所示：

    def create
        retailer = Retailer.find_by(email: params[:email])
        if retailer.present? && retailer.authenticate(params[:password])
            session[:retailer_id] = retailer.id 
            redirect_to store_index_path
        else
            flash.now[:alert] = 'Invalid email or password'
            render :new, status: :unprocessable_entity
        end
    end

您可以在 Turbo 文档https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission中找到更多信息

【讨论】：

【解决方案2】：

我认为您没有使用 turbo_frame_tag 来包装表单。

<%= turbo_frame_tag "post" do %>
  <%= render 'form', post: @post %>
<% end %>

【讨论】：

这是不对的。 OP 希望表单提交在其控制器中点击 format.html，但 turbo_frame_tag 会使其点击 format.turbo_stream 块。

【解决方案3】：

如果您希望您的表单像 Hotwire 之前一样工作，请将local: true 添加到您的表单声明中。换句话说，改变你的表单声明：

form_with url: retailer_log_in_path, class: 'box'

到这里：

form_with url: retailer_log_in_path, class: 'box', local: true

根据the Rails form helper docs，form_with默认使用参数remote: true。这会激活表单上的 Javascript，错误是因为 Javascript 需要特定的（异步）响应；如果您将local: true 添加到您的form_with 声明中，表单提交将不会是异步的，并且错误应该会消失。

【讨论】：