Javascript ReactJS切换排序图标-this.setState不是函数

单击时，我尝试切换每个表格标题的排序图标：

在我的

渲染中

我有：

 function bindContextOnClick(columnName){
        return function(){
            if(columnName === sortColumn) {
                sortOrder = (sortOrder === 'asc') ? 'desc' : 'asc';
                IconSort = (sortOrder === 'asc') ? 'top' : 'bottom';
            } else {
                sortOrder = 'asc';
                IconSort = 'top';
            }
            console.log(this);
            IconName = IconType + "-" + IconSort;

            this.setState({
                Icon: IconName
            }).bind(this);

            onToggleOrder(columnName, sortOrder);
        }
    }

然后，当我循环使用json生成标题时：

     {this.props.rowScheme[i].title} <Glyphicon glyph={this.state.Icon} />

{this.props.rowScheme[i].title}

但是我得到这个。setState不是一个函数

有人能帮忙吗

编辑、完整渲染：

getInitialState: function(){
    return {
        Icon: 'triangle-top'
    }
},

render: function() {
    var headerColumns = [];
    var IconType = 'triangle';
    var IconSort = 'top';
    var IconName = 'triangle-top';
    var onToggleOrder = this.props.onToggleOrder;
    var sortColumn = this.props.sortColumn;
    var sortOrder = this.props.sortOrder;

    function bindContextOnClick(columnName){
        return function(){
            if(columnName === sortColumn) {
                sortOrder = (sortOrder === 'asc') ? 'desc' : 'asc';
                IconSort = (sortOrder === 'asc') ? 'bottom' : 'top';
            } else {
                sortOrder = 'asc';
                IconSort = 'top';
            }
            IconName = IconType + "-" + IconSort;

            onToggleOrder(columnName, sortOrder);

            this.setState({
                Icon: IconName
            });
        }
    }

    for (var i = 0; i < this.props.rowScheme.length; i = i + 1) {
        // by default all visible columns are sortable, unless it has 'sortable'=false option
        if(_.has(this.props.rowScheme[i],"sortable") && !this.props.rowScheme[i].sortable) {
            headerColumns.push(<th key={_.uniqueId('edit_student_tbl_th_')}>{this.props.rowScheme[i].title}</th>);
        } else {

            headerColumns.push(
                <th key={_.uniqueId('edit_student_tbl_th_')}
                    onClick={bindContextOnClick(this.props.rowScheme[i].column).bind(this)}>
                    <span className="sortableColumn">
                        {this.props.rowScheme[i].title} <Glyphicon glyph={this.state.Icon} />
                    </span>
                </th>
            );
        }
    }

    return (
        <thead>
            <tr>
                {headerColumns}
                <th className={this.props.rowActionColumnClass}> </th>
            </tr>
        </thead>
    );
}
});

getInitialState:function（）{
返回{
图标：“三角形顶部”
}
},
render:function（）{
var headerColumns=[]；
var-IconType=‘三角形’；
var IconSort='顶部'；
var IconName='三角形顶部'；
var onToggleOrder=this.props.onToggleOrder；
var sortColumn=this.props.sortColumn；
var sortOrder=this.props.sortOrder；
函数bindContextOnClick（columnName）{
返回函数（）{
if（columnName==sortColumn）{
sortOrder=（sortOrder=='asc'）？'desc'：'asc'；
IconSort=（sortOrder=='asc'）？'bottom'：'top'；
}否则{
排序器='asc'；
IconSort=‘顶部’；
}
IconName=IconType+“-”+IconSort；
onToggleOrder（列名称、排序器）；
这是我的国家({
图标：图标名
});
}
}
对于（变量i=0；i

您需要将此函数的上下文与函数绑定在一起。例如，您可能有如下内容：

onClick={this.bindContextOnClick（columnName）}

---

但是需要这样：

onClick={this.bindContextOnClick.bind（this，columnName）}

在没有看到渲染函数的情况下，我建议您需要在渲染函数中提供上下文，如

bindContextOnClick（'column'）.bind（this）

。不在

this.setState

中，就像你现在正在做的那样。谢谢你的回复，图标会切换，但不是第一次单击，我必须单击三次才能开始切换，你能帮忙吗？