Violazione invariante in React Render OPPURE il modo corretto di iterare e restituire in React

Question

Sono in esecuzione in problemi persistenti nei miei rendering React.

Questo codice

/** @jsx React.DOM */ 
var AnswerRows = React.createClass({ 
    componentDidMount: function() { 
    }, 
    render: function() { 
    {this.props.answers.map(function(answer, i) { 
     return (
     <div id="answerRow"> 
      <label className="AnswerText"> 
      <input type="checkbox" value={answer.id} /> 
      {answer.text} 
      </label> 
     </div> 
    ); 
    }, this)} 
    } 
}); 

var QuizTaking = React.createClass({ 
    componentDidMount: function() { 
    }, 
    render: function() { 
    return (
     <div className="card-holder"> 
     <div className="showQuestionCard x-card host"> 
      <h3 dangerouslySetInnerHTML={{__html: this.props.question.text}}></h3> 
      <div className="answerRows"> 
      <AnswerRows answers={this.props.question.answers}/> 
      </div> 
      <div className='submitAnswers'></div> 
     </div> 
     <div className="paper-shadow-bottom"></div> 
     </div> 
    ) 
    } 
}) 

mi darà Invariant Violation: AnswerRows.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. errori. Tuttavia, questo funziona ogni volta:

/** @jsx React.DOM */ 

var TestIndex = React.createClass({ 

    propTypes: { 
    }, 
    loadTest: function(i) { 
    window.location.replace(this.props.tests[i].url.replace(".json", "/take")) 
    }, 

    render: function() { 
    return(
     <div className="testTable card-holder"> 
     <div className="card-contents"> 
      {this.props.tests.map(function(test, i) { 
      return (
       <div className="testTableRow x-card host" key={test.id}> 
       <label className="__TITLE">{test.title} 
        <button onClick={this.loadTest.bind(test, i)} key={i} type="button" className="StartButton paper-button raisedButton">Start this test</button> 
       </label> 
       <div className="paper-shadow-bottom"></div> 
       </div> 
      ); 
      }, this)} 
     </div> 
     </div> 
    ) 
    } 
}); 

Mi piacerebbe davvero capire che cosa sta succedendo qui, e forse il modo 'giusto' per farlo.

Answer 1

Non è possibile restituire più elementi (come la matrice restituita dalla funzione mappa) dalla funzione di rendering. Inoltre, ti manca una dichiarazione di ritorno. Prova questo:

var AnswerRows = React.createClass({ 
    componentDidMount: function() { 
    }, 
    render: function() { 
    return (
     <div> 
     {this.props.answers.map(function(answer, i) { 
      return (
      <div id="answerRow"> 
       <label className="AnswerText"> 
       <input type="checkbox" value={answer.id} /> 
       {answer.text} 
       </label> 
      </div> 
     ); 
     }, this)} 
     </div> 
    ); 
    } 
});