ReactJS SetState rerendering

Question

nicht

ich habe:

JobScreen

handleSetView(mode, e) { 
     this.setState({ 
      view: mode 
     }); 
     console.log(this.state.view) 
    } 

    render() { 
     return (

      <div className="jobs-screen"> 
       <div className="col-xs-12 col-sm-10 job-list"><JobList view={this.state.view} /></div> 
       <div className="col-xs-12 col-sm-2 panel-container"> 
        <div className="right-panel pull-right"><RightPanel handleSetView={this.handleSetView} /></div> 
... 
) 
} 

RightPanel

render() { 
     return (
      <div> 
       <div className="controls"> 
        <span className="title">Views <img src="images\ajax-loader-bar.gif" width="24" id="loader" className={this.state.loading ? "pull-right fadeIn" : "pull-right fadeOut"}/></span> 
        <button onClick={this.props.handleSetView.bind(this, 'expanded')}><img src="/images/icons/32px/libreoffice.png" /></button> 
        <button onClick={this.props.handleSetView.bind(this, 'condensed')}><img src="/images/icons/32px/stack.png" /></button> 
        </div> 
... 
)} 

Job-Liste

render() { 
     var jobs = []; 
     this.state.jobs.forEach((job) => { 
      jobs.push(
       <Job key={job.id} job={job} view={this.props.view} loading={this.state.loading} toggleTraderModal={this.props.toggleTraderModal} toggleOFTModal={this.props.toggleOFTModal}/> 
      ); 
     }); 

     return (
      <div> 
       {jobs} 
      </div> 
     ); 
    }; 

Das Problem ist, ist, dass die Änderung des Anzeigestatus tut nicht t wiederhole keines der untergeordneten Elemente.

Wie kann ich das zum Funktionieren bringen?

Answer 1

Nicht sicher, ob es der Kern des Problems ist, aber:

handleSetView={this.handleSetView} 

falsch ist, weil, wie js diese bindet. Verwenden Sie:

handleSetView={this.handleSetView.bind(this)} 

statt.

Auch

this.setState({ 
    view: mode 
}); 
console.log(this.state.view) 

scheint seltsam; Beachten Sie, dass this.state nicht direkt nach dem Aufruf setState geändert wird. Es kann einige Zeit dauern, während React den geplanten Vorgang setState absetzt. Setzen Sie das console.log in render, um zu sehen, wann es tatsächlich aufgerufen wird.

Schließlich stellen Sie sicher, Ihre Komponenten nicht implementieren shouldComponentUpdate Lifecycle-Methode (Sie werden wahrscheinlich nicht dies explizit tun, aber wenn Ihre Komponente etwas andere Klasse als React.Component erweitert dies passieren kann)

Answer 2

this in der ist Kontext der Reaktion Komponente so entweder die Referenz this zu Ihnen Funktion handleSetView oder binden this wie von @Tomas