这个问题出现的原因是，当使用 onMouseEnter 和 onMouseLeave 事件改变按钮状态时，按钮的颜色没有正确显示。这是因为每次事件触发时，状态都会被更新并导致按钮颜色改变，但实际上状态不应该每次都被更新，而是只有当鼠标进入或离开按钮时才更新。

为解决这个问题，我们可以使用 useRef 钩子和 useEffect 钩子。在useRef 钩子中存储按钮的初始颜色，然后在 useEffect 钩子中监听按钮是否进入或离开，并根据情况设置按钮的颜色。

以下是解决方法的代码示例：

import React, { useRef, useState, useEffect } from 'react';

function Button() {
  const [hovered, setHovered] = useState(false);
  const buttonRef = useRef(null);
  const initialColor = '#ffffff';

  useEffect(() => {
    if (buttonRef.current) {
      if (hovered) {
        buttonRef.current.style.backgroundColor = '#5a5a5a';
      } else {
        buttonRef.current.style.backgroundColor = initialColor;
      }
    }
  }, [hovered]);

  return (
     setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      Click me
    
  );
}