ruby-on-rails - 使用 ReactJS 向 Rails 提交表单

Question

我正在尝试向我的 Rails 应用程序提交一个简单的表单。我迷失在困惑中，什么都不起作用。这就是我尝试做的:

var newUserForm = React.createClass({
  propTypes: {
    user: React.PropTypes.array
  },
  getInitialState: function() {
    return {name: '', age: '', country: '' };
  },
  handleNameChange: function(e) {
    this.setState({ name: e.target.value });
  },
  handleAgeChange: function(e) {
    this.setState({ age: e.target.value });
  },
  handleCountryChange: function(e) {
    this.setState({ country: e.target.value });
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var name = this.state.name.trim();
    var age = this.state.age.trim();
    var country = this.state.country.trim();
    if (!name || !age || !country) {
      return;
    }
    this.setState({ name: '', age: '', country: '' });

    var user = {user: this.state.user}
    this.setState({data: user});
    $.ajax({
      url: '/users/new',
      dataType: 'json',
      type: 'POST',
      data: {user: user},
      success: function(data) {
        this.setState({data: user});
      }.bind(this),
      error: function(xhr, status, err) {
        this.setState({data: user});
       console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },


  render: function() {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input type="text" placeholder="User's name" value={ this.state.name } onChange={ this.handleNameChange } />
        <input type="text" placeholder="His age" value={ this.state.age } onChange={ this.handleAgeChange } />
        <input type="text" placeholder="Country of origin" value={ this.state.country } onChange={ this.handleCountryChange } />

        <input type="submit" value="Post"/>
      </form>
    )
  }
});

还有我的控制台:

我需要一些帮助。

玩具 Controller .rb

class ToyController < ApplicationController
  def index
    @users = User.all
    render component: 'usersList', props: { users: @users }
  end

  def new
    @user = User.new
    render component: 'newUserForm'
  end

  def create
    @user = User.new(user_params)

    if @user.save
      render component: 'showUser', props: {user: @user }
    else
      render text: "Something went wrong."
    end
  end

  private

  def user_params
    params.require(:user).permit(:name, :age, :country)
  end
end

路线.rb

Rails.application.routes.draw do
  get '/users', to: 'toy#index'
  get '/users/new', to: 'toy#new'
  post '/users/new', to: 'toy#create'
end

Answer 1

TL;DR:您很可能只需要重组要发送的 JSON 以包含“用户” key

<小时/>

更长的响应:

您正在使用所谓的“强参数”，因此当您在 #create 中调用 user_params 并使用 require(:user) ，如果 params 哈希没有单词 user 作为键，则会引发您在上面看到的错误。

一种方法是重组您发送的数据以包含“用户”一词

例如:

{用户:{名称:'测试'，年龄:1}}

也许(可以根据您的需要进行修改以实现上述结构)

$.ajax({
  url: '/users/new',
  dataType: 'json',
  type: 'POST',
  data: user,
  success: function(data) {
    this.setState({data: user});
  }.bind(this),
  error: function(xhr, status, err) {
    //this.setState({data: user});
    // console.error(this.props.url, status, err.toString());
  }.bind(this)
});

到

$.ajax({
  url: '/users/new',
  dataType: 'json',
  type: 'POST',
  data: {user: user},
  success: function(data) {
    this.setState({data: user});
  }.bind(this),
  error: function(xhr, status, err) {
    //this.setState({data: user});
    // console.error(this.props.url, status, err.toString());
  }.bind(this)
});