Reactjs unerwartete Endlosschleife mit render

Ich benutze React, um Include-Komponente implementiert. Es lädt Inhalt von URL. Dieser Test funktioniert, erzeugt aber auch eine unerwartete Endlosschleife mit render ... warum?Reactjs unerwartete Endlosschleife mit render

<script type="text/jsx"> 
    /** @jsx React.DOM */ 
    var Include = React.createClass({ 
    getInitialState: function() { 
     return {content: 'loading...'}; 
    }, 
    render: function() { 
     var url = this.props.src; 
     $.ajax({ 
     url: url, 
     success: function(data) { 
      this.setState({content: data}); 
     }.bind(this) 
     }); 
     return <div>{this.state.content + new Date().getTime()}</div>; 
    } 
    }); 

    var Hello = React.createClass({ 
    render: function() { 
     return <Include src="hello.txt" />; 
    } 
    }); 
    React.renderComponent(
    <Hello />, 
    document.getElementById('hello') 
); 
</script>

Quelle

2014-07-19 Rulo Kobashikawa

ich machen realisiert eine Menge Zeit ausgeführt wird, so ist nicht besseren Ort, um meine Ajax-Aufruf (-_-)‘

Auf diese Weise funktioniert:

<script type="text/jsx"> 
    /** @jsx React.DOM */ 
    var Include = React.createClass({ 
    getInitialState: function() { 
     var url = this.props.src; 
     $.ajax({ 
     url: url, 
     success: function(data) { 
      this.setState({content: data}); 
     }.bind(this) 
     }); 
     return {content: 'loading...'}; 
    }, 
    render: function() { 
     return <div>{this.state.content + new Date().getTime()}</div>; 
    } 
    }); 

    var Hello = React.createClass({ 
    render: function() { 
     return <Include src="hello.txt" />; 
    } 
    }); 
    React.renderComponent(
    <Hello />, 
    document.getElementById('hello') 
); 
</script>

Danke zum Lesen!

Quelle

2014-07-19 16:42:21

Glad aktualisieren Sie das Problem gearbeitet, um zu sehen! Ein kleiner Vorschlag, den ich empfehlen würde, ist, den Ajax-Aufruf in die componentWillMount-Methode zu verschieben. Das Ergebnis ist das gleiche, aber die componentWillMount-Methode führt zu einer besseren Trennung der Probleme. Ich habe eine Geige beigefügt, damit Sie was ich meine. P. S - React ist genial Hier die ist [jsfiddle] (http://jsfiddle.net/NXCyC/50/) – user3508122

@ user3508122 Ich glaube componentDidMount für diese korrekt ist. Es wird im [offiziellen Tutorial] (http://facebook.github.io/react/docs/tutorial.html) verwendet. Der einzige Grund, den ich mir vorstellen kann, ist, dass componentWillMount aufgerufen wird, wenn 'renderComponentToString' (d. H. Server-Rendering) verwendet wird. – FakeRainBrigand

@FakeRainBrigand - Guter Ort! Du hast Recht - mein Fehler. – user3508122

Dies ist eine zuverlässigere Include-Komponente. Die Unterschiede,

machen sollte rein sein (kann ajax es nicht tun)
getInitialState sollte rein
sein, wenn die Stütze dynamisch ist, z.B. <Include url={this.state.x} />, sollte es

var Include = React.createClass({ 
    getInitialState: function() { 
    return {content: 'loading...'}; 
    }, 
    componentDidMount: function(){ 
    this.updateAJAX(this.props.url); 
    }, 
    componentWillReceiveProps: function(nextProps){ 
    // see if it actually changed 
    if (nextProps.url !== this.props.url) { 
     // show loading again 
     this.setState(this.getInitialState); 

     this.updateAJAX(nextProps.url); 
    } 
    }, 
    updateAJAX: function(url){ 
    $.ajax({ 
     url: url, 
     success: function(data) { 
     this.setState({content: data}); 
     }.bind(this) 
    }); 
    }, 
    render: function() { 
    return <div>{this.state.content}</div>; 
    } 
}); 

var Hello = React.createClass({ 
    render: function() { 
    return <Include src="hello.txt" />; 
    } 
});

Quelle

2014-07-20 02:39:11 FakeRainBrigand

Reactjs unerwartete Endlosschleife mit render

Antwort

Verwandte Themen