Reagieren zeigt Komponente auf Basis variabler Wert

Question

Learning & Chrom-Erweiterungen auf die harte Art und Weise reagieren, so meine this.url eines von 2 Werten:

null oder www.sample.com

ich den URL-Wert von einem Asynchron-Anruf bekommen mit chrome.storage.local.get(...) so, wenn ich die Antwort aus dem Speicher ich den Wert solcher Wert verwenden, um this.Url und wollen gesetzt bekommen eine Komponente zur Anzeige unter Verwendung eines ternären Operator wie folgt:

export default React.createClass({ 

    url: '', 

    componentDidMount: function(){ 
    this.observeResource(); 
    }, 


    observeResource(){ 
    var self = this 
    function getValue(callback){ 
     chrome.storage.local.get('xxxx', callback);  
    } 
    getValue(function (url) { 
     this.url = url.xxxx; 
     return this.url; 
    }); 
    }, 

    /* RENDER */ 
    render: function(){ 
    return (
     <div className="app"> 
     <AppHeader /> 
      {this.url != null ? 
      <VideoFoundOverlay /> 
     : null} 

     {this.url == null ? 
      <VideoNotFoundOverlay /> 
     : null }    
     </div> 
    ) 
    } 
}); 

Ich kann den Wert this.url außerhalb der observeResource Funktion nicht erhalten. Wo gehe ich falsch?

Answer 1

1. Die this innerhalb der folgender Aufruf zeigt auf window Ratte sie als die Komponente selbst, da der Callback als eine Funktion aufgerufen wird, ist der window tatsächlich der "Besitzer" der Funktion.

   getValue(function (url) { 
       this.url = url.newswireStoryUrl; 
       return this.url; 
   }); 
   

   diesen Fehler zu vermeiden, können Sie self.url stattdessen verwenden könnte, da Sie ausdrücklich this zu self zuweisen haben. Oder Sie könnten Arrow Function anstelle von function(...) verwenden.

2. Um die Komponente zu rendern, sollten Sie url als Status deklarieren, da nur Zustandsänderungen zum Aufruf der render-Funktion führen.

   export default React.createClass({ 
       getInitialState: function() { 
       return { url: '' }; 
       }, 
       componentDidMount: function(){ 
       this.observeResource(); 
       }, 
       observeResource(){ 
       var self = this; 
       function getValue(callback){ 
        chrome.storage.local.get('newswireStoryUrl', callback);  
       } 
       getValue(function (url) { 
        self.setState({ url: url.newswireStoryUrl }); 
        return self.state.url; 
       }); 
       }, 
       /* RENDER */ 
       render: function(){ 
       return (
        <div className="app"> 
        <AppHeader /> 
         {this.state.url !== null ? 
         <VideoFoundOverlay /> 
        : null} 
   
        {this.state.url === null ? 
         <VideoNotFoundOverlay /> 
        : null }    
        </div> 
       ); 
       } 
   }); 
   

Answer 2

Sie müssen in JSFiddle

Answer 3

bei Arbeitsbeispiel this.setState()

constructor(props) { 
    super(props) 
    this.state = { 
    url: '' 
    } 
} 

componentDidMount() { 
    setTimeout(() => { 
    this.setState({ url: 'www.sample.com' }) 
    }, 1000) 
} 

render() { 
    return <div>this.state.url</div> 
} 

Blick verwenden, würde ich gehen durch und tun es wie folgt aus:

export default React.createClass({ 

    getInitialState: function(){ 
     return { 
      url: null 
     } 
    }, 

    componentDidMount: function(){ 
     this.observeResource(); 
    }, 


    observeResource(){ 
     var self = this 
     function getValue(callback){ 
      chrome.storage.local.get('newswireStoryUrl', callback); 
     } 
     getValue(function (url) { 
      //here you are seting the state of the react component using the 'self' object 
      self.setState({url: url.newswireStoryUrl}) 

      //not sure if the 'return this.url' is needed here. 
      //here the 'this' object is not refering to the react component but 
      //the window object. 
      return this.url; 
     }); 
    }, 

    videoNotFound: function(){ 
     return (
      <div className="app"> 
       <AppHeader /> 
       <VideoNotFoundOverlay /> 
      </div 
     ) 
    }, 

    /* RENDER */ 
    render: function(){ 
     if(this.state.url == null){ 
      return this.videoNotFound() 
     } 

     return (
      <div className="app"> 
       <AppHeader /> 
       <VideoFoundOverlay /> 
      </div> 
     ) 
    } 
});