2016-09-06 14 views
1

移入小道具は、だから私は、私のレンダリングにこのループを持っている:が反応:componentWillMountとReduxの

 {this.props.OneTestArrayProp.questions.map((q, i) => 
     <div key={i} className="questions_div"> 
      <div>Question: {q.question}</div> 
     <div> 
    )} 

this.props.OneTestArrayPropをこのようにロードされます。

componentWillMount() { 
    if (! this.props.OneTestArrayProp.length) { 
    this.props.dispatch(fetchOneTest(test_id)); 
    } 
} 

しかし、私は取得していますが:

Error: "this.props.OneTestArrayProp.questions.map" undefined 

エラーは1秒間表示され、Reduxがデータをロードすると消えます。もちろん、この問題の根本は、this.props.OneTestArrayPropがミドルウェアのサンクによってポピュレートされるときの半分です。

レンダリングを行う前に「反応待ち」にする方法がありますか?

を解決したレッドマーキュリーが提供するソリューションはかなりうまく動作しますが、しかし、私は新しいアレイを追加し、より「Reduxのような」アプローチをコード化:

this.props.QuestionsArrayProp = []; 

とその減速とそれを結びます:

QuestionsArrayProp: state.rootReducer.questions_reducer.QuestionsTestArrayProp 

このようにして、初期の空の配列が得られます。

答えて

4

チェックは、それは表現が短絡し、マップが

を実行されることはありませんでしょう定義されていない

{this.props.OneTestArrayProp && 
    this.props.OneTestArrayProp.questions.map((q, i) => 
    <div key={i} className="questions_div"> 
     <div>Question: {q.question}</div> 
    <div> 
)} 

this.props.OneTestArrayProp場合はその質問の上にマッピングする前に存在している場合

関連する問題