在我的todolist中，我有一列任务，每一个任务都有自己的状态：

state = {
        hover: false
    }

和事件：

switchHover = () => {
        this.setState({ hover: !this.state.hover });
    }

     onMouseEnter={this.switchHover}
     onMouseLeave={this.switchHover}

当任务处于活动状态时，它会显示删除和编辑图标，这些图标的类的状态会发生变化。当您删除任务时，下面的任务会跳转，并且onMouseEnter事件不会激活，这会导致状态与所需的相反。当项目未悬停时，我的图标会显示，而当项目悬停时，图标不会显示。下面是我的图标：

<span
       onClick={this.removeTask}
       className={this.state.hover ? 'task__remove-icon visible' :
           'task__remove-icon hidden'}>
       &#x2715;
   </span>

here is image of my list那么，我该如何解决这个问题呢？