3

我正在使用 ES6 创建一个 React-Rails 应用程序，并且我很难将数据从控制器传递到组件（以及返回）。

我的应用程序包含一个记录表单，它将新创建的记录推送到记录组件。

我的 Records 控制器中的代码是：

class RecordsController < ApplicationController
    def index
        @records = Record.all
    end

    def create
        @record = Record.new(record_params)

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

    end


    private
        def record_params
            params.require(:record).permit(:title, :date, :amount)
        end

end

Records 组件的代码是：

class Records extends React.Component {
    constructor (props) {
        super(props);

    }
    componentWillMount () {
        var records = this.records;
        this.state = {records: records};
    }
    addRecord (record) {
        var records;
        records = this.state.records;
        records.push(record);
        this.setState({records: records});
    }
      render () {
        var records = this.records.map(function(record) {
                        return <Record key={record.id} data={record} />;
                        });

        return (        
                <div>
                    <h2>Records</h2>
                    <RecordForm handleNewRecord={this.addRecord()} />
                    <table>
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Date</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            {records}
                        </tbody>
                    </table>
                </div>
        );
      }
}

记录表单组件的代码是：

class RecordForm extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      title: "",
      date: "",
      amount: ""
    }
    this.handleNewRecord = this.props.handleNewRecord.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange (e) {
    var stateObject = function() {
      returnObj = {};
      returnObj[this.target.name] = this.target.value;
         return returnObj;
    }.bind(e)();

    this.setState( stateObject ); 
    }

  handleSubmit (e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: '',
      data: {record: this.state},
      success: function (data) {
                  this.props.handleNewRecord();
                  this.setState({title: "", date: "", amount: ""})
              },
      dataType: 'JSON'
    });
  }
  render () {
    return (
          <form className="form-inline" onSubmit={this.handleSubmit} >
            <div className="form-group">
              <input  
                type="text" 
                className="form-control text" 
                placeholder="Date"
                name="date"
                value={this.state.date}
                onChange={this.handleChange}
              />
              </div>
            <div className="form-group">
              <input  
                type="text" 
                className="form-control" 
                placeholder="Title"
                name="title"
                value={this.state.title}
                onChange={this.handleChange}
              />
            </div>
            <div className="form-group">
              <input  
                type="text" 
                className="form-control" 
                placeholder="Amount"
                name="amount"
                value={this.state.amount}
                onChange={this.handleChange}
              />
            </div>
            <input 
                type="submit" 
                value="Create Record"
                className="btn btn-primary"
            />
          </form>
    );
  }
}

Record 组件的代码是：

class Record extends React.Component {
  render () {
    return (
      <tr>
        <td><em>{this.props.data.title}</em></td>
        <td>{this.props.data.date}</td>
        <td>{this.props.data.amount}</td>
      </tr>
    );
  }
}

运行此代码时，我收到以下有关 Records 组件中的 render 方法的错误：

未捕获的类型错误：无法读取未定义的属性“地图”

我为这个问题的长度道歉，但我已经研究了一段时间，坦率地说我很困惑。

有谁知道为什么这不起作用？我非常感谢任何人可以提供的任何建议。谢谢！

4

2 回答 2

3

this.records.map 是未定义的，因为记录是未定义的，在实例化为@records 后没有从控制器中作为实例变量下降。

app/views/dashboard/show.html.erb 有同样的问题，看起来像这样：

<%= react_component 'Dashboard', { flashes: flash, user: user}, :div %>

对我来说，为了在 react-rails 下进行修复而更改为这个：

<%= react_component 'Dashboard', { flashes: flash, user: @user}, :div %>

在我的情况下，实例变量被命名为@user ...

于 2016-05-19T03:01:48.307 回答
1

要从 Rails 后端传递数据以做出反应，您可以使用 jbuilder，并在渲染组件时传递文件：

<%= react_component "RecordForm",
    render(template: 'records/form.json.jbuilder') %>

您现在必须form.json.jbuilder在文件夹中创建一个文件views/records：

 json.records do
   json.array! @records do |record|
     json.partial! "record", record: record
   end
 end

这只是一个示例，因为我不知道您的数据是如何构造的，但这是一个很好的方法。要了解更多信息： https ://github.com/rails/jbuilder

要将数据从 React 发送到 Rails，您应该使用由事件触发的 ajax 调用。

于 2016-05-18T17:23:24.397 回答