組件狀態中的屬性更新速度不夠快

Question

當我將鼠標懸停在圖標上時，我試圖顯示文本，但是如果您快速懸停圖標，它會卡在顯示文本而不是顯示圖標上（默認狀態）

例如： https : //giphy.com/gifs/UsS4JcRJGV5qfCI5VI

技能組件：

import React, { useState } from 'react';
import { UserIcon } from './AboutBtnStyling';
import IconText from '../../../IconText';

const AboutBtn = () => {
  const [hover, setHover] = useState(false);

  const onHover = () => {
    setHover(true)
  }

  const onLeave = () => {
    setHover(false)
  }

  return (
    <div onMouseEnter={onHover} onMouseLeave={onLeave} role="button">
      {hover ? <IconText text="ABOUT" /> : <UserIcon /> }
    </div>
  )
}

export default AboutBtn;

然后我希望將其轉換為類組件會有所幫助，bc 與 useState 鈎子相關的陳舊閉包問題

import React, { Component } from 'react';
import { SkillIcon } from './SkillsBtnStyling';
import IconText from '../../../IconText';

class SkillsBtn extends Component {
  constructor(props) {
    super(props);
    this. state = { hover: false }
  }

  onHover = () => {
    this.setState({ hover: true })
  }

  onLeave = () => {
    this.setState({ hover: false })
  }

  render() {
    return (
      <div onMouseEnter={this.onHover} onMouseLeave={this.onLeave} role="button">
      {this.state.hover ? <IconText text="SKILLS" /> : <SkillIcon /> }
    </div>
    )
  }

}

export default SkillsBtn;

非常感謝任何見解！ 我很想解決這個問題，而不是訴諸於使用CSS來實現這個效果

Answer 1

useState 的一個重要方面是它是異步的。 我相信這會導致您的代碼出現問題。 我會為您的 setState 調用添加更多決定性，並根據鼠標位置而不是切換來設置它（真/假）。

import React, { useState } from 'react';
import { SkillsButton } from './SkillsBtnElements'

const SkillsBtn = () => {
const [hover, setHover] = useState(false);
const onHover = () => {
    setHover(!hover)
}

return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() =>                                        
        setHover(false)} role="button" tabIndex='-3' >
        { hover ? "SKILLS" : <SkillsButton /> }
    </div>
 )
}

export default SkillsBtn;