В приложении React-Rails, передавая переменные экземпляра из контроллера в компонент (и обратно)

Question

Я создаю приложение React-Rails, используя ES6, и мне трудно передать данные с контроллера на компонент (и обратно).

Мое приложение включает в себя запись, которая подталкивает вновь созданную запись к компоненту записей.

код в мой контроллер записей:

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

код для компонента записи:

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

Когда я запускаю этот код, я получаю следующее сообщение об ошибке относительно метода визуализации в компоненте записей:

Uncaught TypeError: Cannot read property 'map' of undefined

Извиняюсь за длину этого вопроса, но я работаю над этим для в то время как я откровенно смущен.

У кого-нибудь есть идея, почему это не работает? Я полностью понимаю любой совет, который может предоставить любой. Благодаря!

Answer 1

Чтобы передать данные с рельсов бэкэндом реагировать, вы можете использовать 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 to Rails, вы должны использовать вызовы ajax, вызванные событиями.

Answer 2

Это.records.map не определено, поскольку записи не определены, не были сгенерированы как экземпляр var из контроллера после того, как они были созданы как @records.

Имел же проблема с приложением/просмотров/приборная панель/show.html.erb, который выглядел так:

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

изменено на это для исправления под реагирующих рельсах, для меня:

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

в моем случае переменная экземпляра была названа @user ...