gpt4 book ai didi

javascript - ReactJS SetState 不重新渲染

转载 作者:数据小太阳 更新时间:2023-10-29 05:18:11 26 4
gpt4 key购买 nike

我有:

工作屏幕

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

右面板

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

工作 list

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

问题是, View 状态的改变不会重新渲染任何子元素。

我怎样才能让它工作?

最佳答案

不确定这是否是您问题的核心,但是:

handleSetView={this.handleSetView}

是错误的,因为 js 如何绑定(bind)它。使用:

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

相反。

此外,

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

看起来很奇怪;请注意,this.state 不会在您调用 setState 后立即修改,React 调度预定的 setState 操作可能需要一些时间。将 console.log 放入 render 以查看它何时被实际调用。

最后,确保你的组件没有实现 shouldComponentUpdate 生命周期方法(你可能没有明确地这样做,但如果你的组件扩展了 React.Component 以外的一些类,这可能会发生)

关于javascript - ReactJS SetState 不重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37204680/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com