React项目中如何正确展示指定用户的关注者与关注列表

需求：通过用户ID在其个人资料页面展示该用户的关注者与关注列表。
当前问题：组件仅能展示已登录用户的关注/粉丝列表，点击其他用户资料页时，弹窗仍显示登录用户的列表数据。

原代码存在以下核心问题：

• 目标用户定位错误：遍历所有用户并判断user.id !== userId，完全搞反了筛选逻辑，没有先定位到当前页面的目标用户
• 关注/粉丝数据逻辑混乱：错误地用user.follower.includes(user.id)判断关注关系，没有明确区分“目标用户关注的人”和“关注目标用户的人”
• 静态文案：弹窗标题始终显示“Mes Abonnements”（我的关注），未根据目标用户动态调整

import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import Modal from "../Components/Log/Modals";
import { isEmpty } from "../Components/Utils";
import FollowHandler from "./FollowHandler";

const FollowingPopup = ({ type }) => {
    const currentUser = useSelector((state) => state.userReducer);
    const [isOpen, setIsOpen] = useState(false);
    const { id: targetUserId } = useParams();
    const [showFollowings, setShowFollowings] = useState(true); // true=显示关注列表，false=显示粉丝列表
    const allUsers = useSelector((state) => state.usersReducer);

    // 定位当前页面的目标用户
    const targetUser = allUsers.find(user => user.id === targetUserId);
    if (!targetUser) return null;

    // 获取目标用户的关注列表（适配原数据结构：从user.follower中提取关注的用户ID）
    const targetFollowings = allUsers.filter(user => 
        targetUser.follower?.some(item => item.followerId === user.id)
    );

    // 获取目标用户的粉丝列表
    const targetFollowers = allUsers.filter(user => 
        user.follower?.some(item => item.followerId === targetUserId)
    );

    return (
        <Modal open={isOpen} onClick={() => setIsOpen(false)}>
            <span
                onClick={() => setIsOpen(false)}
                className="followers__modal__close"
            ></span>
            <header className="followers__modal__header">
                <button
                    className={`followers ${showFollowings ? 'active-followers' : ''}`}
                    onClick={() => setShowFollowings(true)}
                >
                    {targetUser.firstname}的关注
                </button>
                <button
                    className={`followers ${!showFollowings ? 'active-followers' : ''}`}
                    onClick={() => setShowFollowings(false)}
                >
                    {targetUser.firstname}的粉丝
                </button>
            </header>

            <div className="followers__modal__content">
                <ul>
                    {showFollowings ? (
                        targetFollowings.map(user => (
                            <li key={user.id} className="followers__modal__followers">
                                <a
                                    href={`/${user.id}`}
                                    className="followers__modal__followers__links"
                                >
                                    <img src={user.picture} alt={`${user.firstname} ${user.lastname}`} />
                                    <h4>{`${user.firstname} ${user.lastname}`}</h4>
                                </a>
                                {user.id !== currentUser.id && (
                                    <FollowHandler followerId={user.id} type={'suggestion'} />
                                )}
                            </li>
                        ))
                    ) : (
                        targetFollowers.map(user => (
                            <li key={user.id} className="followers__modal__followers">
                                <a
                                    href={`/${user.id}`}
                                    className="followers__modal__followers__links"
                                >
                                    <img src={user.picture} alt={`${user.firstname} ${user.lastname}`} />
                                    <h4>{`${user.firstname} ${user.lastname}`}</h4>
                                </a>
                                {user.id !== currentUser.id && (
                                    <FollowHandler followerId={user.id} type={'suggestion'} />
                                )}
                            </li>
                        ))
                    )}
                </ul>
            </div>
        </Modal>
    );
};

export default FollowingPopup;

• 目标用户精准定位：通过allUsers.find直接找到当前页面的目标用户，所有数据处理均基于该用户展开
• 清晰区分关注/粉丝逻辑：
  • 关注列表：筛选出所有被目标用户关注的用户（适配原数据中follower字段的结构）
  • 粉丝列表：筛选出所有关注了目标用户的用户
• 动态文案适配：弹窗标题根据目标用户和当前列表类型动态调整，不再固定显示“我的关注”
• 状态逻辑优化：用showFollowings状态统一控制关注/粉丝列表的切换，逻辑更直观
• 可读性提升：重命名变量（如userData改为currentUser，userId改为targetUserId），让变量含义更明确
• 性能优化：提前计算目标用户的关注/粉丝列表，避免渲染循环中重复执行筛选逻辑

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