记一次Bug

这个Bug查了好几个小时…
如此愚蠢的一个Bug…

给自己跪了.

 <Menu
            onClick={this.getComponent}
            mode="horizontal"
            selectedKeys={[currentPage]}
            style={{ lineHeight: '62px', borderBottom: '0px' }}
          >
            <Menu.Item key="video"  className={some==='video?"selected":""} ><Icon type="caret-right" /></Menu.Item>
            <Menu.Item key="upload"  className={some==='upload?"selected":""}   ><img src={video} style={{ width: '20px', height: '20px', marginTop: '-7px' }} /></Menu.Item>
            <Menu.Item key="settings" ><Icon type="setting" /></Menu.Item>
            <Menu.Item key="profile" ><Icon type="user" /></Menu.Item>
          </Menu>

场景是,上述代码是父组件,点击upload 图标进入他对应的子组件,在子组件中某个操作完成之后自动转入video页面. 此时对应的图标也应由upload 变化到 video .所以,我用了

className={some==='upload'?"selected":""} 

动态改变some的值,来保证只会有一个图标被选上.

但是,无论我如何改变some的值,从upload 跳入video之后,两个图标都会被选上.
我表示百思不得其解.以为是渲染的问题,但是打断点发现并没有问题,直到我在"selected"前面加上一个参数:

className={some==='video'?"video selected":""}
className={some==='upload'?"upload selected":""}

发现跳转之后的结果是:

 className="video selected"
 className="selected"

我才发现…我是个大sb…
ant.design menu组件,提供一个属性 selectedKeys={[this.state.current]}用来给menu.item的选中项添加selected的classname的…所以,我在多此一举个什么劲啊,虽然我人为的把upload selected 的名称去掉了,但是它本身还有一个啊…

哎