如何阻止映射列表中所有按钮触发同一hover效果与文本切换？

你现在的问题是所有按钮共用了同一个text状态，只要有一个按钮触发hover修改状态，所有按钮都会跟着变。要解决这个问题，得给每个按钮单独维护状态，下面给两种可行的方案：

方案一：用对象状态跟踪每个按钮的hover状态 #

把全局的text状态改成对象，用每个follow项的唯一标识（比如username）作为键，单独存储每个按钮的文本：

// 初始化状态为对象，每个follow项默认文本是"Following"
const [hoverTexts, setHoverTexts] = useState({});

// 鼠标移入时，只更新当前follow项的文本
const handleChangeText = (username) => {
  setHoverTexts(prev => ({ ...prev, [username]: 'Unfollow' }));
};

// 鼠标移出时，恢复当前follow项的文本
const handleChange = (username) => {
  setHoverTexts(prev => ({ ...prev, [username]: 'Following' }));
};

{relation?.followings?.data?.map((following: R, i) => (
  <Button 
    key={following.username} // 必须添加唯一key避免渲染警告
    mr="-1rem" 
    borderRadius="2rem" 
    onClick={(e) => handleFollowUnfollow(e, following?.username, 'unfollow')} 
    _hover={{ border: "1px solid #FFCCCB", color: "red" }} 
    onMouseOver={() => handleChangeText(following.username)} 
    onMouseLeave={() => handleChange(following.username)}
  > 
    {/* 优先取当前项的状态，无状态时用默认值"Following" */}
    {hoverTexts[following.username] || "Following"}
  </Button>
))}

方案二：提取独立的FollowButton组件 #

把每个按钮拆成独立组件，组件内部自己维护hover状态，这样每个按钮的状态完全隔离：

// 单独的FollowButton组件
const FollowButton = ({ following, handleFollowUnfollow }) => {
  const [text, setText] = useState("Following");

  const handleChangeText = () => {
    setText('Unfollow');
  };

  const handleChange = () => {
    setText('Following');
  };

  return (
    <Button 
      mr="-1rem" 
      borderRadius="2rem" 
      onClick={(e) => handleFollowUnfollow(e, following?.username, 'unfollow')} 
      _hover={{ border: "1px solid #FFCCCB", color: "red" }} 
      onMouseOver={handleChangeText} 
      onMouseLeave={handleChange}
    > 
      {text}
    </Button>
  );
};

// 原组件中使用
{relation?.followings?.data?.map((following: R, i) => (
  <FollowButton 
    key={following.username}
    following={following} 
    handleFollowUnfollow={handleFollowUnfollow} 
  />
))}

两种方案都能解决问题：方案二更符合组件化思想，后续维护更方便；方案一不用拆分组件，适合快速修改。记得给map生成的元素添加唯一key，避免React渲染警告。

内容的提问来源于stack exchange，提问作者Chioma