React和Rails：未捕获的TypeError：this.props.quotes.map不是函数

Question

我正在使用rails应用程序并使用gem＆＃39; react-rails＆＃39;宝石。以下是相关文件/代码：

索引

<%= react_component("QuotesContainer", {quotes: @quotes}) %>

quotes_container.js.jsx

var QuotesContainer = React.createClass({

    getInitialState: function(){
    return {
      quotes: this.props.quotes,
    }
  },

  parentQuoteSubmit: function(formData){

    $.ajax({
      url: "/quotes",
      dataType: 'json',
      type: 'POST',
      data: formData,

      success: function(quotes) {

        this.setState({quotes: quotes});

      }.bind(this),

      error: function(response, status, err) {

        console.log("An error occured")
      }
   });
  },

  render: function() {
    return(
      <div>
        <h1> Quote List </h1>
        <QuoteTable quotes={this.state.quotes}/>
        <NewQuoteForm parentQuoteSubmit={this.parentQuoteSubmit}/>
      </div>
    );
  }
});

quote_table.js.jsx

var QuoteTable = React.createClass({


  renderQuoteRows: function(){
    return(
      this.props.quotes.map(function(quote){
        return(
          <div className="row" style={{marginTop: "20px"}} key={quote.id}>

            <div className="col-sm-2">
              {quote.zip}
            </div>

            <div className="col-sm-2">
              {quote.gender}
            </div>

          </div>
        )
      })
    );
  },

  render: function() {
    return(
      <div>

        <div className="row" style={{marginTop: "50px"}}>

          <div className="col-sm-2" style={{fontWeight: "bold"}}>
            Zip 
          </div>

          <div className="col-sm-2" style={{fontWeight: "bold"}}>
            Gender
          </div>

        </div>

        {this.renderQuoteRows()}

      </div>
    );
  }

});

new_quote_form.js.jsx

var NewQuoteForm = React.createClass({


  getInitialState: function(){
    return {zip: "", gender: ""};
  },

   resetState: function(){
    this.setState({zip: "", gender: "", formErrors: {}});
  },

  newQuoteSubmit: function(e){
    e.preventDefault();

    this.props.parentQuoteSubmit({quote: {zip: this.state.zip, gender: this.state.gender}});
    this.resetState
  },

  handleZipChange: function(e){
    this.setState({zip: e.target.value});
  },

  handleGenderChange: function(e){
    this.setState({gender: e.target.value});
  },


  renderQuoteZipField: function(){


    return(

      <div className='row'>

        <div className='col-sm-4'>

          <div className= 'form-group'>

            <input
              name="quote[zip]"
              type="string"
              placeholder="zip"
              value={this.state.zip}
              onChange={this.handleZipChange}
              className="string form-control"
            />

          </div>

        </div>

      </div>
    );
  },

  renderQuoteGenderField: function(){


    return(
      <div className='row'>

        <div className='col-sm-4'>

          <div className= 'form-group'>

            <input
              name="quote[gender]"
              type="string"
              placeholder="gender"
              value={this.state.gender}
              onChange={this.handleGenderChange}
              className="string form-control"
            />

          </div>

        </div>

      </div>
    );

  },


  render: function() {

    return(
      <div>
        <h4 style={{marginTop: "50px"}}> Create New Quote </h4>

        <form style={{marginTop: "30px"}} onSubmit={this.newQuoteSubmit}>

          <div className='form-inputs'/>


            {this.renderQuoteZipField()}

            {this.renderQuoteGenderField()}

            <div className='row'>
              <div className='col-sm-4'>
                <input type="submit" value="Save" className='btn btn-primary' />
              </div>
            </div>

        </form>

      </div>

    );
  }
});

错误来自quote_table.js.jsx中的return this.props.quotes.map(function (quote)。我得到引号是一个数组，但为什么？当我在quotes_container中调用getInitialState时，是不是该数组？

Answer 1

问题出在我的控制器代码和我的创建方法......

而不是......

def create
    @quote = Quote.new(quote_params)

    respond_to do |format|
      if @quote.save
        format.html { redirect_to @quote, notice: 'Quote was successfully created.' }
        format.json { render :show, status: :created, location: @quote }
      else
        format.html { render :new }
        format.json { render json: @quote.errors, status: :unprocessable_entity }
      end
    end
  end

我需要......

  def create
    @quote = Quote.new(quote_params)

    respond_to do |format|
      if @quote.save
        format.html { redirect_to @quote, notice: 'Quote was successfully created.' }
        format.json { render json: Quote.all }
      else
        format.html { render :new }
        format.json { render json: @quote.errors, status: :unprocessable_entity }
      end
    end
  end

请注意format.json { render json: Quote.all }