使用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>
    )
  }
});

我的控制台：

我需要一些帮助。

toy_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

的routes.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以包含“用户”＃39;键

更长的回应：

您正在使用所谓的“强大的参数”，所以当您在user_params中呼叫#create并拥有require(:user)时，如果params哈希没有单词user作为键，会出现上面看到的错误。

一条路线是重新构建您要发送的数据，其中包含＆＃39; user＆＃39;

例如：

{user: {name: 'test', age: 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)
});