记一次Bug

Posted 2023-02-20 haliofwu

这个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 的名称去掉了,但是它本身还有一个啊…

哎