반응 렌더링의 불변의 위반 또는 반복의 올바른 방법

Question

내 React 렌더에서 지속적인 문제가 발생합니다.

이 코드

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

map 함수가 반환 한 배열과 같은 여러 요소를 render 함수에서 반환 할 수 없습니다. 또한 return 문이 누락되었습니다. 이것을 시도하십시오 :

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