Javascript 在映射子级上时，React mouseEnter事件不起作用

我只想让这些子元素在鼠标上方显示一个删除按钮

控制台登录HandleMouseCenter显示，在渲染时，所有子级都会触发mouseEnter事件。它似乎陷入了一个循环。调试几乎是不可能的

只有当OnMouseCenter和onMouseLeave留在代码中时，问题才会出现

render(){

    const handleMouseEnter = (tool) => this.setState({display : tool});
    const handleMouseLeave = () => this.setState({display : "none"});

return (
 <div>

    <div className="search-result-background">
      <div className="search-result-row row">
        <div className="col-md-4">
        </div>
        <div className="col-md-4">
        <form>
      <TextFieldGroup className="find-tool-search-bar"
        onChange= {this.checkToolExists}
        value = {this.state.toolname}
        field = 'toolname'
        label = ''
        error = {this.state.errors}
        placeholder = "FIND IN FAVORITES"
      />
    </form>
       </div>

<div className="col-md-4">
        <ButtonToolbar>
          <DropdownButton noCaret onSelect={this.sort} bsSize="large" title="Sort by" id="dropdown-size-large">
            <MenuItem eventKey="1">Name</MenuItem>
            <MenuItem eventKey="2">Uploaded Date</MenuItem>
          </DropdownButton>
        </ButtonToolbar>
        </div>
        <h1 className="search-error">{this.state.errors}</h1>
        <div className="col-md-12" >
          {this.state.filteredTools.map((tool,i)=>
            <div key ={i} className={"child " + tool.toolname } onMouseEnter={handleMouseEnter(tool.toolname)}
            onMouseLeave={handleMouseLeave}> {this.state.display == tool.toolname ?
               <button >remove?</button> : null}
              <Link to={`/tools/${tool.id.substring(4)}`}>

              <Thumbnail 
                         className="thumb" src={logoImagePurple} alt="242x200">
                <h3>{tool.toolname}</h3>
              </Thumbnail>
              </Link>
            </div> 
          )}
        </div>
      </div> 
    </div>
  </div>          
)
  }
}

render（）{
constHandleMouseCenter=（tool）=>this.setState（{display:tool}）；
constHandleMouseLeave=（）=>this.setState（{display:“none”}）；
返回(
名称
上载日期
{this.state.errors}
{this.state.filteredTools.map（（工具，i）=>
{this.state.display==tool.toolname？
删除？：null}
{tool.toolname}
)}
)
}
}

问题在于这一行：

onMouseCenter={handleMouseCenter（tool.toolname）}

您应该将其更改为：

---

onMouseCenter={（）=>handleMouseCenter（tool.toolname）}

问题在于这行：

onMouseCenter={handleMouseCenter（tool.toolname）}

您应该将其更改为：

onMouseCenter={（）=>HandleMouseCenter（tool.toolname）}