ReactJS SetState没有重新渲染

时间:2016-05-13 08:12:04

标签: javascript reactjs fluxible

我有:

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

问题是,更改视图状态不会重新渲染任何子元素。

我怎样才能让它发挥作用?

2 个答案:

答案 0 :(得分:6)

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

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,则可能会发生这种情况)

答案 1 :(得分:0)

this位于react Component的上下文中,因此将this的引用传递给函数handleSetView或者绑定this,如@Tomas所述