onMouseEnter 和 onMouseLeave 在我的代码中的行为与预期相反 - 为啥？ [复制]

Posted 2023-02-21

【中文标题】onMouseEnter 和 onMouseLeave 在我的代码中的行为与预期相反 - 为啥？ [复制]

【英文标题】：onMouseEnter and onMouseLeave behaving opposite as expected in my code - why? [duplicate]onMouseEnter 和 onMouseLeave 在我的代码中的行为与预期相反 - 为什么？ [复制]

【发布时间】：2019-07-12 07:43:17

【问题描述】：

在组件AddWordPartButton的类中，我将状态isHovered初始化为false，并使用onMouseEnter和onMouseLeave来改变它的值。

这是我想要的映射（在我看来，这是我在代码中定义的）：

onMouseEnter ⇒ isHovered = true onMouseLeave ⇒ isHovered = false

发生的事情与我预期的相反，我看不出这种行为有任何原因。 这是似乎发生的映射：

onMouseEnter ⇒ isHovered = false onMouseLeave ⇒ isHovered = true

我在另一个组件中使用AddWordPartButton，没有任何东西会影响它的行为，在另一个组件的render 函数中调用这个<AddWordPartButton /> - 除了这个之外它工作得很好。

这是代码：

import React from 'react;

class AddWordPartButton extends React.Component 

    constructor(props) 
        super(props);
        this.state = 
            isHovered: false,
        ;
        this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this);
        this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
     

    onMouseEnterHandler() 
        this.setState(isHovered: true);
        console.log(this.state); //logs false
    

    onMouseLeaveHandler() 
        this.setState(isHovered: false);
        console.log(this.state); //logs true
    

    render() 
        <div className=classes.addWordPartButton__Container 
            onMouseEnter=this.onMouseEnterHandler
            onMouseLeave=this.onMouseLeaveHandler
        >
        </div>


    

为什么会发生这种情况，我该如何解决？

【问题讨论】：

setState 是异步的，您的代码正在运行。请改用this.setState(isHovered: true, () => console.log(this.state));。

谢谢，我不知道它是异步的。 :)

【参考方案1】：

set state 是异步的，请改用它，setState 函数的回调参数将在设置状态后触发。相反，您总是在新状态更新之后记录一步。

onMouseEnterHandler() 
    this.setState(() => (isHovered: true), () => console.log(this.state));


onMouseLeaveHandler() 
    this.setState(() => (isHovered: false), () => console.log(this.state));

【讨论】：

谢谢，我不知道它是异步的。它解决了我的问题。

说它是异步的并不十分准确。很多时候是同步的。 “[...]这并不意味着它总是异步的——它主要意味着你不能依赖它是同步的。” ***.com/a/48438145/2054731

不，它是 100% 异步的，不要混淆人们并说它大部分时间“表现同步”