如何为卡片组件中每个按钮单独维护订阅状态？

你当前的问题根源是所有用户卡片共用了同一个isSubscribed状态变量，所以点击任意一个按钮都会改变全局状态，导致所有按钮同步切换。要实现每个按钮独立状态，需要为每个用户单独存储订阅状态，具体修改如下：

1. 重构状态管理 #

把单个的isSubscribed变量改成对象类型的状态，用用户ID作为键来记录每个用户的订阅状态：

// 初始化状态：如果没有初始订阅数据，默认所有用户都未订阅（值为0）
const [subscribedUsers, setSubscribedUsers] = useState({});

// 如果你的users列表里自带用户订阅状态（比如每个user有isSubscribed字段），可以这样初始化：
// const [subscribedUsers, setSubscribedUsers] = useState(() => {
//   const initialState = {};
//   users.forEach(user => {
//     initialState[user.userId] = user.isSubscribed; // 用接口返回的实际状态赋值
//   });
//   return initialState;
// });

2. 修改状态更新函数 #

让ChangeSubscription接收用户ID作为参数，只更新对应用户的订阅状态：

function ChangeSubscription(userId) {
  setSubscribedUsers(prevState => ({
    ...prevState,
    // 切换当前用户的订阅状态
    [userId]: prevState[userId] === 1 ? 0 : 1
  }));
}

3. 调整渲染逻辑 #

在map渲染时，根据当前用户的ID去取对应的订阅状态，而不是用全局状态：

{users.map(user => (
  <div className="Profile-block" key={user.userId}>
    <div className="Profile">
      <Avatar
        alt={user.userName}
        src={ConstantsList.GET_PROFILEPIC_BY_USERID + user.userId}
        sx={{ width: 36, height: 36 }}
      />
      <div className="Suggestion-Profile-Name-Block">
        <div className="Suggestion-Profile-Name">{user.userName}</div>
        <div className="Profile-Account-Name">{user.name}</div>
        <div className="Suggestion-Profile-Desc">Recommendation for you</div>
      </div>
    </div>
    {/* 用当前用户的订阅状态判断显示哪个按钮 */}
    {subscribedUsers[user.userId] === 1 ? (
      <UnfollowButton 
        otherUserId={user.userId}
        ChangeSubscriptionState={() => ChangeSubscription(user.userId)}
      />
    ) : (
      <FollowButton 
        otherUserId={user.userId}
        ChangeSubscriptionState={() => ChangeSubscription(user.userId)}
      />
    )}
  </div>
))}

4. 组件回调适配 #

FollowButton和UnfollowButton的逻辑不需要大改，因为我们已经通过箭头函数把当前用户的ID传递给了ChangeSubscription：

// FollowButton 保持现有逻辑即可
const FollowButton = ({ otherUserId, ChangeSubscriptionState }) => {   
  const handleFollow = async () => {     
    try {       
      await AddFollower(otherUserId);       
      ChangeSubscriptionState();     
    } catch (error) {}   
  };    
  
  return (  
    <div>
      <button className="FollowButton" onClick={handleFollow}>Follow</button>     
    </div>
  ); 
};

这样修改后，每个用户的订阅状态会被单独存储和更新，点击单个按钮只会改变对应用户的按钮状态，不会影响其他用户。

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