在我的渲染return()里面我有这些：

<button onClick={ this.selectTimeframe('Today') }
        className={ this.setActiveIf('Today') } type="button">Today</button>

这是什么功能：

selectTimeframe(timeframe) {
    // this.setState({ timeframe });
}

^我现在必须注释掉setState否则我会得到上面发布的那个错误并且应用程序中断了.

我在构造函数中有这个：

this.selectTimeframe = this.selectTimeframe.bind(this);

我发现这个answer here,但它没有意义,我怎么想传递变量？或者他是说每个独特的按钮都需要一个独特的功能？为了避免在渲染中调用它？

完整代码

import React from 'react';

export class TimeframeFilter extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            timeframe: 'Today'
        };

        this.selectTimeframe = this.selectTimeframe.bind(this);
        this.setActiveIf = this.setActiveIf.bind(this);
    }

    componentDidMount() {
        console.log('%c TimeframeFilter componentDidMount', 'background: #393939; color: #bada55', this.state);
    }

    selectTimeframe(timeframe) {
        // this.setState({ timeframe });
    }

    setActiveIf(timeframe) {
        return this.state.timeframe === timeframe ? 'btn btn-default active' : 'btn btn-default';
    }

    render() {
        return (
            <div className="fl">
                <span className="label label-default mr10">Timeframe</span>
                <div className="btn-group btn-group-sm mr20" role="group">
                    <button onClick={ this.selectTimeframe('Today') }
                            className={ this.setActiveIf('Today') } type="button">Today</button>
                    <button onClick={ this.selectTimeframe('Week') }
                            className={ this.setActiveIf('Week') } type="button">Week</button>
                    <button onClick={ this.selectTimeframe('Month') }
                            className={ this.setActiveIf('Month') } type="button">Month</button>
                    <button onClick={ this.selectTimeframe('Year') }
                            className={ this.setActiveIf('Year') } type="button">Year</button>
                    <button onClick={ this.selectTimeframe('All') }
                            className={ this.setActiveIf('All') } type="button">All</button>
                </div>
            </div>
        );
    }
}

export default TimeframeFilter;

解决方法:

您应该使用箭头函数或绑定方法将值传递给onClick函数,否则它只是执行以在每次重新渲染时将值返回到onClick,如果您在其中使用setState,它将调用rerender并且函数将再次调用并因此重复这个过程.

这样做

<button onClick={ ()=> this.selectTimeframe('Today') }
        className={ this.setActiveIf('Today') } type="button">Today</button>

要么

<button onClick={ this.selectTimeframe.bind(this, 'Today') }
        className={ this.setActiveIf('Today') } type="button">Today</button>

希望我能清楚地向你解释.