ReactJS SETSTATE不重新描绘

问题描述：

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

作业表

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

问题是，是，视图状态的变化没有不要放弃任何儿童元素。

我该如何得到这个工作？

您是否有任何错误？ –

没有错误。 – imperium2335

答

不知道这是你的问题的核心，但：

handleSetView={this.handleSetView}

是错误的，因为JS如何结合这一点。使用：

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

改为。

此外，

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

似乎有些奇怪;请注意，this.state在您拨打setState后不会被修改，但React可能需要一些时间才会调度预定的setState操作。将该console.log放入渲染中以查看它何时被实际调用。

最后，确保您的组件没有实现shouldComponentUpdate生命周期方法（你可能不这样做明确的，但如果你的组件延伸到比React.Component其他一些类可能出现这种情况）

全国联保:)我错过了.bind（这个）。那究竟做了什么？ – imperium2335

:) 当你调用'handleSetView'时，它确保'this'正确绑定到组件对象（这不会在js中自动发生） –

@Thomas Kulich我确信这只是一个愚蠢的错误，但你说这不会自动发生在JS，我认为你的意思是在ES2015。 – sheeldotme

答

this是在反应组件的上下文或者将this的引用传递给您的函数handleSetView或绑定，如@Tomas提到的

ReactJS SETSTATE不重新描绘

相关推荐