प्रतिक्रिया रेंडर में Invariant उल्लंघन या प्रतिक्रिया

Question

में पुन: सक्रिय करने और वापस करने का उचित तरीका मैं अपने प्रतिक्रिया प्रस्तुतकर्ताओं में लगातार समस्याओं में चल रहा हूं।

इस कोड

/** @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> 
    ) 
    } 
}) 

मुझे Invariant Violation: AnswerRows.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. त्रुटियों देंगे।

/** @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> 
    ) 
    } 
}); 

मैं वास्तव में समझने के लिए यहां चल रहा है, और शायद 'सही' जिस तरह से यह करने के लिए करना चाहते हैं: बहरहाल, यह हर बार काम करता है।

Answer 1

आप रेंडर फ़ंक्शन से एकाधिक तत्व (जैसे मैप फ़ंक्शन द्वारा लौटाए गए सरणी) को वापस नहीं कर सकते हैं। इसके अलावा, आप एक रिटर्न स्टेटमेंट खो रहे हैं। इसे आज़माएं:

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