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

Question

在组件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>


    }

}

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

Answer 1

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

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

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