如何判断对象ID是否存在于另一对象数组？实现关注/取消关注按钮状态切换

一、优化关注ID的快速查询 #

为了高效判断粉丝是否在你的关注列表中，将关注列表的ID提取为Set结构（查询效率O(1)，远高于数组的O(n)），用useMemo派生这个值，确保仅在关注列表变化时更新：

import { useMemo } from 'react';

// ... 其他状态定义

const followingIds = useMemo(() => {
  return new Set(followingList.map(item => item.id));
}, [followingList]);

二、修正异步列表获取逻辑 #

原代码中getFollower会直接执行，并非在getFollowing完成后触发，可改用Promise.all并行获取两个列表（无依赖时更高效），或调整链式调用顺序：

useEffect(() => {
  // 并行获取关注与粉丝列表
  Promise.all([getFollowing(), getFollower()])
    .then(([followingRes, followerRes]) => {
      setFollowingList(followingRes);
      setFollowerList(followerRes);
    })
    .catch(err => console.error('获取列表失败', err));
}, []);

三、动态渲染粉丝列表的按钮状态 #

无需给每个粉丝单独维护isFollowing状态，渲染时直接用followingIds.has(follow.id)判断关注状态，动态切换按钮文字与点击逻辑：

{followerList.map((follow) => {
  const isFollowing = followingIds.has(follow.id);
  return (
    <div className="follow-item" key={follow.id}> {/* 用用户ID作为key，避免索引不稳定问题 */}
      <div className="follow-img">
        <img src={follow.profileImg} alt="UserPic" />
      </div>
      <div className="follow-name">{follow.nickname}</div>
      <FollowBtn onClick={() => handleFollowToggle(follow.id, isFollowing)}>
        {isFollowing ? 'Unfollow' : 'Follow'}
      </FollowBtn>
    </div>
  );
})}

四、实现关注/取消关注的切换逻辑 #

添加处理按钮点击的函数，同步更新前端状态与后端数据：

const handleFollowToggle = async (userId, isCurrentlyFollowing) => {
  try {
    if (isCurrentlyFollowing) {
      // 调用取消关注接口
      await unfollowUser(userId);
      // 更新关注列表：移除该用户
      setFollowingList(prev => prev.filter(item => item.id !== userId));
    } else {
      // 调用关注接口
      await followUser(userId);
      // 更新关注列表：添加该用户（可根据接口返回结果调整）
      const userToAdd = followerList.find(item => item.id === userId);
      if (userToAdd) {
        setFollowingList(prev => [...prev, userToAdd]);
      }
    }
  } catch (err) {
    console.error('操作失败', err);
  }
};

五、优化关注列表的取消关注逻辑（可选） #

关注列表的取消关注按钮可复用上述切换函数，简化代码：

{followingList.map((follow) => {
  return (
    <div className="follow-item" key={follow.id}>
      <div className="follow-img"><img src={follow.profileImg} alt="UserPic" /></div>
      <div className="follow-name">{follow.nickname}</div>
      <FollowBtn onClick={() => handleFollowToggle(follow.id, true)}>Unfollow</FollowBtn>
    </div>
  );
})}

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