Rails ViewComponent创建方法渲染异常问题求助

问题原因分析 #

这两个问题均由Rails 7+默认启用的Turbo机制导致：

1. 表单默认通过Turbo Stream提交，redirect_to会被Turbo以AJAX方式处理，而非触发完整页面跳转，最终造成新旧内容叠加显示；
2. 保存失败时直接渲染组件，Turbo无法识别未包裹在Turbo Stream规范中的响应，因此不会更新页面展示错误提示。

解决方案1：禁用表单Turbo（最直接） #

修改组件模板app/components/appointments/new_appointment_component.haml的form_with，添加data: { turbo: false }属性，强制表单以传统方式提交：

= form_with(model: @appointment, url: appointments_path, method: :post, data: { turbo: false }) do |f|
  = f.hidden_field :patient_id, value: @patient.id
  %label= 'Doctor'
  = f.collection_select(:doctor_id, @doctors, :id, :full_name)
  
  %label= 'Date'
  = f.datetime_select :appointment_date, start_year: Date.today.year, end_year: Date.today.year + 1, minute_step: 20
  - if @appointment.errors[:appointment_date].any?
    %p= @appointment.errors[:appointment_date].join(", ")

  = f.submit 'Save'
= link_to "Back", patients_path

同时简化AppointmentsController的create方法，移除多余的content_type指定：

class AppointmentsController < ApplicationController

  # ... 其他方法保持不变 ...
  
  def create
    @appointment = Appointment.new(appointment_params)

    if @appointment.save
      redirect_to root_path, notice: '预约创建成功' # 可选添加提示信息
    else        
      @patient = @appointment.patient
      @doctors = Doctor.all
      render Appointments::NewAppointmentComponent.new(patient: @patient, doctors: @doctors, appointment: @appointment)
    end    
  end

  # ... 私有方法保持不变 ...
end

解决方案2：适配Turbo（保留无刷新体验） #

如果想保留Turbo的AJAX无刷新特性，可按以下步骤调整：

步骤1：给表单容器添加唯一ID #

修改组件模板，在外层添加带唯一ID的容器：

%div#new_appointment_form
  = form_with(model: @appointment, url: appointments_path, method: :post) do |f|
    = f.hidden_field :patient_id, value: @patient.id
    %label= 'Doctor'
    = f.collection_select(:doctor_id, @doctors, :id, :full_name)
    
    %label= 'Date'
    = f.datetime_select :appointment_date, start_year: Date.today.year, end_year: Date.today.year + 1, minute_step: 20
    - if @appointment.errors[:appointment_date].any?
      %p= @appointment.errors[:appointment_date].join(", ")

    = f.submit 'Save'
= link_to "Back", patients_path

步骤2：调整Controller的create方法 #

让成功跳转返回Turbo要求的303 See Other状态码，失败时返回Turbo Stream更新表单：

class AppointmentsController < ApplicationController

  # ... 其他方法保持不变 ...
  
  def create
    @appointment = Appointment.new(appointment_params)

    if @appointment.save
      # 303状态码告知Turbo执行完整页面跳转
      redirect_to root_path, notice: '预约创建成功', status: :see_other
    else        
      @patient = @appointment.patient
      @doctors = Doctor.all
      respond_to do |format|
        format.html { render component: Appointments::NewAppointmentComponent.new(patient: @patient, doctors: @doctors, appointment: @appointment) }
        format.turbo_stream do
          # 用Turbo Stream替换表单容器内容，展示错误信息
          render turbo_stream: turbo_stream.replace(
            'new_appointment_form',
            component: Appointments::NewAppointmentComponent.new(patient: @patient, doctors: @doctors, appointment: @appointment)
          )
        end
      end
    end    
  end

  # ... 私有方法保持不变 ...
end

内容的提问来源于stack exchange，提问作者Steven