反応が子供のレンダリングを防ぐ（応答を待っているajaxローダー）

Question

私は簡単なajaxローダーを書こうとしています。私は親コンテナ内でprops.childrenのレンダリングを防ぐことができますか？問題は、子どもがレンダリングしたかったことです.Loaderがそれを表示したいかどうかにかかわらず、レンダリングがエラーを起こしているajaxデータに基づいている場合です。

例：https://jsfiddle.net/j8dvsq39/

例2： エラーカウスのthis.state.data.userを生成するこの例は、AJAXリクエストの前に定義されていません。

ローダー：

import React from 'react' 
export default React.createClass({ 

    getDefaultProps() { 
     return { text: "Loading", loaded: false }; 
    }, 

    render() { 

     if(this.props.loaded == false) 
      return <div>{this.props.text}</div>; 
     else 
      return <div>{this.props.children}</div>; 
    } 
}) 

クラスローダ

import React from 'react' 
import Loader from '../helpers/Loader'; 
import {comm} from '../Comm'; 

export default React.createClass({ 

    getInitialState() { 
     return {loaded: false, data: null}; 
    }, 
    componentWillMount(){ 
     comm.get("/xxx/xxx", {json: 1}, (back) => { 
      console.log(back); 
      this.setState({loaded: true, data: back}); 
     }); 
    }, 
    render(){ 
     return <Loader loaded={this.state.loaded}>{this.state.data.user.name}</Loader> 
}); 

Answer 1

を使用しては理由は、最初にあなたはdata=nullを定義され、あなたがthis.state.data.user.nameを使用しているAJAX呼び出しの前に、それはエラーがスローされます。

Cannot read property 'name' of undefined

簡単な解決策は、データをチェックする必要があります答えを

var Loader = React.createClass({ 
 
    getDefaultProps() { 
 
     return { text: "Loading", loaded: false }; 
 
    }, 
 
    render() { 
 
     if(this.props.loaded == false) 
 
      return <div>{this.props.text}</div>; 
 
     else 
 
      return <div>{this.props.children}</div>; 
 
    } 
 
}); 
 

 
var Hello = React.createClass({ 
 
    getInitialState() { 
 
     return {loaded: false, data: null}; 
 
    }, 
 
    componentWillMount(){ 
 
     setTimeout(()=>{ 
 
      this.setState({loaded: true, data: {user:{name: "login"}}}); 
 
     }, 1000); 
 
    }, 
 

 
    render: function() { 
 
    var user = null; 
 
    return <Loader loaded={this.state.loaded}> 
 
       <div> 
 
       Hello {this.state.data ? this.state.data.user.name : null} 
 
       </div> 
 
      </Loader>; 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Hello name="World" />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='container'/>