ReactJS:创建鼠标悬停事件时出现重复项

import React, { useState } from 'react';

const HoverComponent = () => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ backgroundColor: isHovered ? 'yellow' : 'white' }}
    >
      Hover over me!
    </div>
  );
};

export default HoverComponent;

import React, { useState, useCallback } from 'react';

const HoverComponent = () => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = useCallback(() => {
    setIsHovered(true);
  }, []);

  const handleMouseLeave = useCallback(() => {
    setIsHovered(false);
  }, []);

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ backgroundColor: isHovered ? 'yellow' : 'white' }}
    >
      Hover over me!
    </div>
  );
};

export default HoverComponent;