Javascript 反应状态增量不更新视图

我有以下资料：

class PickColor extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            active: 0
        }

        this.setState = this.setState.bind(this);
    }

    setActiveClass () {
        this.setState({ active:this.state.active + 1 })
    }

    backToPrevious (e) {
        e.preventDefault();
        this.props.actionID(1);
        this.props.activeNav('case-0');
    }
    goToNext (e) {
        e.preventDefault();
        this.props.actionID(3);
        this.props.activeNav('case-2');
        this.props.setNavB(true);
        this.props.setIconsHolderOnOff(true);
    }
    getColorValue(event) {
        var color_id = event.target.getAttribute("data-color-name");
        this.props.colorName(color_id);
        this.props.setColorTextID(event.target.getAttribute("data-color-id"));
        this.setActiveClass();
    }
    getColorFromCode(color){
        var className;

        switch (color) {
            case "fc0d1b":
                className = 'red';
            break;
            case "fed343":
                className = 'yellow';
            break;
            case "2afd82":
                className = 'green';
            break;
            case "2af3fd":
                className = 'blue';
            break;
            case "a025fb":
                className = 'purple';
            break;
        }

        return className;
    }
    getActiveForm () {
        if (this.props.show === 2) {
            return "show-form";
        }
        else {
            return "";
        }   
    }

    render () {
        console.log(this.state.active);
        var activeForm = this.getActiveForm(this.props.show);
        var colorsLink = [],
            that = this,
            colorInfo ;

        this.props.colors.forEach(function(el, i) { 
            colorsLink.push(<li 
                                data-color-id={el.id}
                                data-color-name={that.getColorFromCode(el.background_color)}
                                className={that.props.active == i ? 'active' : '' + that.getColorFromCode(el.background_color)} 
                                key={el.background_color} 
                                onClick={that.getColorValue.bind(that)}>
                            </li>
            );
        });

        if (this.props.currentState.activeColorTextID != "") { 
            colorInfo = <ColorInfo colors={this.props.colors} colorID={this.props.currentState.activeColorTextID}  />
        }

        return (
            <section className={"colors form " + activeForm}>
                <h2>Pick your<br /> color</h2>
                <ul>
                    {colorsLink}
                </ul>
                <div className="color-info-wrapper">
                    {colorInfo}
                </div>
                <button className="back" onClick={this.backToPrevious.bind(this)}><span>back</span></button>
                <button className="next" onClick={this.goToNext.bind(this)}><span>continue</span></button>
            </section>
        );
    }
}

类PickColor扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
活动：0
}
this.setState=this.setState.bind（this）；
}
setActiveClass（）{
this.setState（{active:this.state.active+1}）
}
前（e）项{
e、 预防默认值（）；
这个.props.actionID（1）；
this.props.activeNav（'case-0'）；
}
GotonNext（e）{
e、 预防默认值（）；
这个.props.actionID（3）；
this.props.activeNav（'case-2'）；
this.props.setNavB（true）；
this.props.seticonholderoff（true）；
}
getColorValue（事件）{
var color_id=event.target.getAttribute（“数据颜色名称”）；
this.props.colorName（color\u id）；
this.props.setColorTextID（event.target.getAttribute（“数据颜色id”））；
这个.setActiveClass（）；
}
getColorFromCode（颜色）{
var类名；
开关（彩色）{
案例“fc0d1b”：
className='red'；
打破
案件“fed343”：
className='yellow'；
打破
案例“2afd82”：
className='green'；
打破
案例“2af3fd”：
className='blue'；
打破
案例“a025fb”：
className='purple'；
打破
}
返回类名；
}
getActiveForm（）{
如果（this.props.show==2）{
返回“显示形式”；
}
否则{
返回“”；
}   
}
渲染（）{
console.log（this.state.active）；
var activeForm=this.getActiveForm（this.props.show）；
var colorsLink=[]，
那=这个，
色彩信息；
this.props.colors.forEach（函数（el，i）{
颜色链接推送（


);
});
如果（this.props.currentState.activeColorTextID！=“”）{
颜色信息=
}
返回(
选择你的
颜色

{colorsLink}

{colorInfo}
返回
持续
);
}
}

---

我试图分配一个活动onClick类，但它似乎根本没有被添加。

我认为您引用的是

道具.active

而不是

state.active

。。。否则，我不确定让

处于活动状态的意义

className={that.props.active == i ? 'active' : '' + that.getColorFromCode(el.background_color)}

应该是
that.state.active==i？“活动“…”

此外，您可以简化从映射创建的
colorsLink
数组，而不是在列表上迭代和使用推送。映射返回一个新数组，您可以通过组合
forEach
和
push
手动执行该操作

var colorsLink = this.props.colors.map(function(el, i) { 
    return <li 
                data-color-id={el.id}
                data-color-name={that.getColorFromCode(el.background_color)}
                className={that.state.active == i ? 'active' : '' + that.getColorFromCode(el.background_color)} 
                key={el.background_color} 
                onClick={that.getColorValue.bind(that)}>
           </li>;
    });

var colorsLink=this.props.colors.map（函数（el，i）{
返回

；
});
您可以尝试使用className={`colors form${activeForm}`}吗？请注意它是“而不是”。（）考虑到您正在调用直接影响此组件逻辑的方法，您是否有可能为父组件添加代码？@AndreiNeagu我已经尝试过，但我得到的只是颜色和形式