[英]ReactJS SetState not rerendering
I have: 我有:
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>
...
)}
JobList 工作清单
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>
);
};
The problem is, is that the changing of the view state does not rerender any of the child elements. 问题在于,视图状态的更改不会重新呈现任何子元素。
How can I get this to work? 我该如何工作?
Not sure if it is the core of your problem, but: 不知道这是否是您问题的核心,但是:
handleSetView={this.handleSetView}
is wrong, because how js binds this. 是错误的,因为js是如何绑定的。 Use:
使用:
handleSetView={this.handleSetView.bind(this)}
instead. 代替。
Also, 也,
this.setState({
view: mode
});
console.log(this.state.view)
seems strange; 看起来很奇怪 note that
this.state
is not modified right after you call setState
, it may took some time while React dispatches the scheduled setState
operation. 请注意,在调用
setState
,不会立即修改this.state
,这可能需要一些时间才能使React调度已调度的setState
操作。 Put that console.log
into render to see when it is actually called. 将该
console.log
放入渲染器以查看其实际调用时间。
Finally, make sure, your components do not implement shouldComponentUpdate
lifecycle method (you are probably not doing this explicitly, but if your component extends some class other than React.Component this may happen) 最后,请确保您的组件没有实现
shouldComponentUpdate
生命周期方法(您可能没有明确地执行此操作,但是如果您的组件扩展了React.Component以外的其他类,则可能会发生这种情况)
this
是在反应组分的上下文,以便任一传的参考this
对你起作用handleSetView
绑定或this
通过提及@Tomas
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.