ReactJS SetState不重新渲染

Question

我有：

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

右侧面板

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

---

你有任何错误吗？ - The Reason

没有错误。 - imperium2335

这不是状态没有重新渲染的问题，你只是没有绑定你的函数。 - user3748818

Answer 1

不确定这是否是你问题的核心，但是：

handleSetView={this.handleSetView}

这是错误的，因为js绑定的方式不正确。请使用以下方法：

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

instead.

Also,

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

似乎有些奇怪；需要注意的是在调用setState后，this.state并没有立即被修改，因为React需要一定时间来调度已计划的setState操作。将那个console.log放到render函数中以查看其实际调用时间。

最后，请确保您的组件没有实现shouldComponentUpdate生命周期方法（您可能没有显式地这样做，但如果您的组件扩展了某个不同于React.Component的类，则可能会发生这种情况）。

- Tomas Kulich

---

天才啊 :) 我一直在缺少 .bind(this)。那到底是做什么用的？ - imperium2335

它确保在调用handleSetView时，this正确地绑定到组件对象（这在js中不会自动发生）。 - Tomas Kulich

@Thomas Kulich，我相信这只是个小错误，但你说在JS中这并不会自动发生，我想你是指在ES2015中。 - sheeldotme

这并不是处理这个问题的最佳方式，因为每次重新渲染都会创建一个新函数。更好的方法是在构造函数中绑定this.handleSetView或将其转换为es6箭头函数。 - Isaac Pak

Answer 2

this是在React组件的上下文中，所以要么将this的引用传递给你的函数handleSetView，要么像@Tomas提到的那样绑定this。

- Kartikeya Sharma