为什么在react中的mouseleave事件中工具提示不隐藏

Question

我试图在mouse enter上显示工具提示，并在mouse leave上隐藏。首先，我做了一个简单的演示，效果很好。https://codesandbox.io/s/exciting-shannon-4zuij?file=/src/list.js

上面的代码悬停时工作良好，显示工具提示，离开时隐藏。

请参阅我在应用程序中应用的相同概念。(此代码不起作用(https://codesandbox.io/s/cool-liskov-8rvjw?file=/src/App.js

当我悬停一个项目时，它会显示工具提示。但当你离开该项目时，不会隐藏工具提示。有些地方出了问题。

const Student = ({students,clickHandler}) => {
console.log(students,"---ee")
const [selectedStudent,setSelectedStudent]  = useState(null)
const onMouseHandler = (student,e)=>{
student.visibility = true
setSelectedStudent(student)
}
const onMouseLeaveHandler = (student)=>{
console.log('======',student)
student.visibility = false
setSelectedStudent(student)
}
return (
<ul className="student-container">
{
students && students.length > 0 ? students.map((student,index)=>{
return (
<li key={index} onClick={()=>{
clickHandler(student)
}}
onMouseLeave={()=>{
onMouseLeaveHandler(student)
}}
onMouseEnter={(e)=>{
onMouseHandler(student,e)
}} style={{position:'relative'}}>
<a><span>{student.name}</span></a>
{student.visibility? <ToolTip showToolTip={student.visibility} selectedStudent={selectedStudent}/>:null}
</li>
)
}):null
}
</ul>
);
};
export default Student;

步骤过多再现

1. 悬停在第一个项目Raj上
2. 然后尝试将鼠标悬停在sameer上。两个工具提示都将显示。我只想显示一个悬停的工具提示

I want my handlers should be in my functional component . I don't want to move these handler to parent component and pass handler as a props

Answer 1

在您的演示中，它也不太好用，一个只在打开另一个时隐藏。当您设置student.visibility时，您并没有设置状态，所以没有重新绘制任何内容。

然后，当你调用setSelectedStudent时，你会在那里传递和以前一样的引用，因为它是同一个对象，所以状态没有改变，而且——没有任何东西被重新引用。

您要做的是将更新后的学生传递给一个新变量。像这样：

setSelectedStudent({...student})

然后所有的都应该工作