Question

我正在使用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

记录组件的代码是：

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方法的以下错误：

未捕获的TypeError：无法读取属性＆＃39; map＆＃39;未定义的

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

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

Answer 1

this.records.map未定义，因为记录未定义，在被实例化为@records后未作为控制器的实例var而下降。

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 ...

Answer 2

要从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调用。

在React-Rails应用程序中，将实例变量从控制器传递到组件（并返回）

2 个答案: