Javascript ReactJS SetState 不重新渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37204680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS SetState not rerendering
提问by imperium2335
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?
我怎样才能让它发挥作用？
采纳答案by Tomas Kulich
Not sure if it is the core of your problem, but:
不确定这是否是您问题的核心，但是：
handleSetView={this.handleSetView}
is wrong, because how js binds this. Use:
是错误的，因为 js 是如何绑定 this 的。用：
handleSetView={this.handleSetView.bind(this)}
instead.
反而。
Also,
还，
this.setState({
view: mode
});
console.log(this.state.view)
seems strange; note that this.stateis not modified right after you call setState, it may took some time while React dispatches the scheduled setStateoperation. Put that console.loginto render to see when it is actually called.
看起来很奇怪；请注意，this.state在您调用后不会立即修改setState，React 调度调度setState操作可能需要一些时间。将其console.log放入 render 以查看何时实际调用它。
Finally, make sure, your components do not implement shouldComponentUpdatelifecycle 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 之外的某个类，这可能会发生）
回答by Kartikeya Sharma
thisis in the context of the react Component so either pass the reference of thisto you function handleSetViewor bind thisas mentioned by @Tomas
this位于反应组件的上下文中，因此可以将 的引用传递this给您的函数handleSetView或绑定，this如@Tomas 所述
