reagieren verhindern Kinder render (Ajax Loader warten auf Antwort)

Question

Ich versuche zu schreiben, einfach Ajax Loader und ich frage mich, dass ich verhindern kann, dass props.children im übergeordneten Container. Das Problem ist, dass Kinder rendern wollen, egal, ob der Loader es anzeigen will oder nicht, und ob das Rendering auf AJAX-Daten basiert, die Fehler enthalten.

Beispiel: https://jsfiddle.net/j8dvsq39/

Example2: Dieses Beispiel wird Fehler couse this.state.data.user produzieren wird, bevor Ajax-Anforderung nicht definiert.

Loader:

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

Klasse mit Loader

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

Der Grund hierfür ist, zunächst definiert Sie data=null und vor dem Ajax-Aufruf Sie verwenden this.state.data.user.name, es wird den Fehler werfen:

Cannot read property 'name' of undefined

Einfache Lösung müssen Sie die Prüfung auf Daten un til Sie die Ajax-Antwort erhalten haben, prüfen diese:

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'/>