在服务器端找不到表单404上的Reactjs和rails实现错误

Question

我在前端视图中使用Reactjs，在后端使用Rails，我在这两个问题上都是新的，我通过Ajax在删除和编辑操作上得到了一个404找不到的结果。下面是我的部分代码，希望它会有所帮助：Customer.js.jsx var Customer=react.createClass（{getInitialState：function（）{return{edit：false}；}，

handleToggle: function(e) {
    e.preventDefault();
    this.setState({ edit: !this.state.edit });
},

handleDelete: function(e) {
    e.preventDefault();
    $.ajax({
        method: 'DELETE',
        url: '/customers/' + this.props.customer.id,
        dataType: 'json',
        success: function() {
            this.props.handleDeleteCustomer(this.props.customer)
        }.bind(this)
    });
},

handleEdit: function(e) {
    e.preventDefault();
    var data = { name: React.findDOMNode(this.refs.name).value,
        lastname: React.findDOMNode(this.refs.lastname).value,
        mobile: React.findDOMNode(this.refs.mobile).value,
        phone: React.findDOMNode(this.refs.phone).value,
        email: React.findDOMNode(this.refs.email).value,
        address: React.findDOMNode(this.refs.address).value,
        zip: React.findDOMNode(this.refs.zip).value,
        city: React.findDOMNode(this.refs.city).value,
        state: React.findDOMNode(this.refs.state).value}

    $.ajax({
        method: 'PUT',
        url: '/customers/' + this.props.customer.id,
        dataType: 'json',
        data: { customer: data },
        success: function(data) {
            this.setState({ edit: false });
            this.props.handleEditCustomer(this.props.customer, data);
        }.bind(this)
    });
},

customerRow: function() {
    return(
    <tr>
        <td>{this.props.customer.name}</td>
        <td>{this.props.customer.lastname}</td>
        <td>{this.props.customer.mobile}</td>
        <td>{this.props.customer.phone}</td>
        <td>{this.props.customer.email}</td>
        <td>{this.props.customer.address}</td>
        <td>{this.props.customer.city}</td>
        <td>{this.props.customer.zip}</td>
        <td>{this.props.customer.state}</td>
            <td>
                <a className='btn btn-default' onClick={this.handleToggle}>
                    Edit
                </a>
                <a className='btn btn-danger' onClick={this.handleDelete}>
                    Delete
                </a>
            </td>
        </tr>
    );
},...there is more. 

以下是我的控制器：

class CustomersController < ApplicationController
  before_action :set_customer, only: [:update, :destroy]

  def index
    @customers = Customer.all
  end

  def create
    @customer = Customer.new(customer_params)

    if @customer.save
      render json: @customer
    else
      render json: @customer.errors, status: :unprocessable_entity
    end
  end
end

def update
  if @customer.update(customer_params)
    render json: @customer
  else
    render json: @customer.errors, status: :unprocessable_entity
  end
end

def destroy
  @customer.destroy
  head :no_content
end

private

def customer_params
  params.require(:customer).permit(:name, :lastname, :mobile, :phone, :email, :address, :zip, :city, :state)
end

def set_customer
  @customer = Customer.find(params[:id])
end

以下是当我按下删除按钮时，服务器日志中的内容:[15007]127.0.0.1-[10/nov/2015:17:01:26-0400]“delete/Customers/1 HTTP/1.1”404 194 70 0.1995

以下是控制台日志：DELETE http://localhost:3000/customers/1 404（未找到）XHR完成加载：DELETE“http://localhost:3000/customers/1”

Answer 1

正如我们在注释中讨论的那样，CustomersController实际上在Create方法之后结束，因此Update、Destroy、Customer_Params和Set_Customer方法都不属于CustomersController方法。因此，在create方法之后将第三个end移动到文件的末尾应该可以解决这个问题。您的控制器应该如下所示：

class CustomersController < ApplicationController
  before_action :set_customer, only: [:update, :destroy]

  def index
    @customers = Customer.all
  end

  def create
    @customer = Customer.new(customer_params)

    if @customer.save
      render json: @customer
    else
      render json: @customer.errors, status: :unprocessable_entity
    end
  end
# note that there was a third end here

  def update
    if @customer.update(customer_params)
      render json: @customer
    else
      render json: @customer.errors, status: :unprocessable_entity
    end
  end

  def destroy
    @customer.destroy
    head :no_content
  end

  private

  def customer_params
    params.require(:customer).permit(:name, :lastname, :mobile, :phone, :email, :address, :zip, :city, :state)
  end

  def set_customer
    @customer = Customer.find(params[:id])
  end
end # end moved to here