如何从 Rails 正确获取 AJAX 的 React 请求

Question

我是 Rails 的新手，虽然我大体上理解 structure/how 它的工作原理。旁注，我的目标是在 views/home/application.html.erb 中有 1 个 javascript 导入标签，它将导入单个 React 文件，然后将我的其余组件导入树状结构。由于我使用 Express 的经验，我已经习惯了这种方法，所以如果这不是 Rails.

的标准处理方式，请告诉我

然而，我目前面临的问题是，我t/don不知道如何让我的 Rails 控制器发送我的实例变量作为对我的 axios 请求的响应。我希望我的浏览器能够 console.log('TESTING MY RAILS ROUTE')，但它会记录整个 HTML 响应。

Index.jsx（在javascript/components）

import React from "react"
import ReactDOM from 'react-dom'
import axios from 'axios'


class Index extends React.Component {

  componentDidMount() {
    axios.get('/login')
    .then(res => {
      console.log(res.data)
    })
  }

  render() {
    return (
        <div>
            <h1>Testing Axios</h1>
        </div>
    )
  }
}

export default Index

config/routes.rb

Rails.application.routes.draw do
    get 'welcome/index'

    resources :login

    root 'welcome#index'

end

controllers/login_controller.rb

class LoginController < ApplicationController

    def index
        @test = 'TESTING MY RAILS ROUTE'
    end
end

index.html.erb（在views/welcome）

<%= react_component('Index') %>

Answer 1

Rails 有一个约定，如果不是默认格式，您需要选择要响应的格式。 默认情况下，Rails 控制器操作响应 html 请求。

您应该能够通过添加以下代码配置此控制器操作以响应 html 和 Ajax 请求。

def index
  @test = 'TESTING MY RAILS ROUTE'

  respond_to do |format|
    format.js json: @test, status: :ok
    format.html
  end 
end

Answer 2

您需要配置您的 Rails 控制器以响应 json，因为它当前正在响应 HTML 类型的响应。

由于您将 React 与 Rails 一起使用，我假设您希望您的 Rails API 始终 return JSON 以便 React 以渲染。

使用 responders gem 可以帮助简化此实现，并减少控制器中的代码。

将 gem 'responders' 添加到您的 Gemfile。此外，将 routes.db 中的登录资源默认设置为 json，如下所示：

resources :login, defaults: {format: :json}

现在在控制器级别应用此更改以始终响应 JSON。在控制器顶部添加 respond_to :json。然后在控制器操作中使用 respond_with。 respond_with 将在您的控制器的所有操作中呈现 json，只要在顶部定义了 respond_to :json。

class LoginController < ApplicationController
  respond_to :json

  def index
    @test = 'TESTING MY RAILS ROUTE'
    respond_with @test
  end
end

或者，您也可以通过在控制器操作中使用 respond_to，仅对单个控制器操作使用 json 进行响应。

如何从 Rails 正确获取 AJAX 的 React 请求

How to properly get an AJAX request to React from Rails

ruby

ruby-on-rails

ruby-on-rails-3

reactjs

axios