Filtered数组始终为空：React项目成员筛选异常问题

我尝试编写筛选逻辑，根据URL参数中的项目名称获取当前项目的成员，但出现了筛选后的数组始终为空的问题——即使修改为明显的筛选条件，teamMembers仍为空。不过使用其他方法操作allUsers数组却能正常运行。

代码 #

function Team({ setShowAddMembers }: props) {
    const params = useParams();
    const { projectName } = params;

    const [projectTeam, setProjectTeam] = useState<user[]>([]);

    useEffect(() => {
        try {
            const getProjectTeam = async () => {
                const allProjects: project[] = await getAllProjects();
                console.log(allProjects); // 正常输出项目数组
                const allUsers: user[] = await getAllUsers();
                console.log(allUsers); // 正常输出用户数组

                // 获取当前页面对应的项目
                const currentProject: project[] = allProjects.filter(
                    (project) => project.name === projectName
                );
                console.log(currentProject); // 正常输出包含1个元素的数组
                console.log(currentProject[0]); // 正常输出项目对象
                const { members } = currentProject[0];
                console.log(members); // 正常输出当前项目的成员数组
                const teamMembers: user[] = allUsers.filter((user) =>
                    members.includes(user.username)
                );
                console.log(teamMembers); // 异常：输出空数组
                setProjectTeam(teamMembers);
            };
            getProjectTeam();
        } catch (error) {
            console.log(error);
        }
    }, []);
}

控制台日志（按代码执行顺序） #

• allProjects: 包含7个对象的数组，示例结构：

{
    "tickets": [],
    "_id": "640f80cbd601d54a956de834",
    "desc": "Marketplace website",
    "name": "Market",
    "members": [
        "John Doe",
        "Dave Gray"
    ]
}

• allUsers: 包含4个对象的数组，示例结构：

{
    "_id": "640c6e87d8efde2fabbb1ba2",
    "username": "AdminDemo",
    "email": "admindemo@gmail.com",
    "password": "$2b$10$7O7JZVgYW9k0dOXiAFtWv.jN7VVmoooPagOvnEnfEfSB7cTH0md/S",
    "role": "admin",
    "protected": true,
    "__v": 0
}

• current project:

[
    {
        "tickets": [],
        "_id": "640f80cbd601d54a956de834",
        "desc": "Marketplace website",
        "name": "Market",
        "members": [
            "John Doe",
            "Dave Gray"
        ]
    }
]

• currentProject[0]:

{
    "tickets": [],
    "_id": "640f80cbd601d54a956de834",
    "desc": "Marketplace website",
    "name": "Market",
    "members": [
        "John Doe",
        "Dave Gray"
    ]
}

• members:

["John Doe", "Dave Gray"]

• teamMembers:

[]

从日志数据来看，members列表里的是"John Doe"、"Dave Gray"，但你提供的allUsers示例里只有"AdminDemo"这个用户，可从以下几点排查解决：

1. 检查用户数据是否匹配
   先确认allUsers数组中是否存在members列表里的用户（"John Doe"、"Dave Gray"）。如果数据源里根本没有这两个用户，筛选结果为空是正常的，需要核对数据正确性。

2. 核对字段匹配关系
   检查members存储的内容是否和user对象的字段对应：

   • 如果members里存的是用户全名，但user对象里对应的字段是name而非username，需修改筛选条件为members.includes(user.name)。

3. 处理大小写敏感问题
   JavaScript的includes方法是大小写敏感的，比如"john doe"和"John Doe"会被判定为不同值。可以统一转成小写后再比较：

   const lowerCaseMembers = members.map(member => member.toLowerCase());
   const teamMembers: user[] = allUsers.filter(user => 
       lowerCaseMembers.includes(user.username.toLowerCase())
   );
   

4. 修正useEffect依赖
   当前useEffect的依赖数组是空的，当URL参数projectName变化时，不会重新执行获取数据的逻辑。需要把projectName加入依赖数组：

   useEffect(() => {
       // ... 原有异步逻辑
   }, [projectName]); // 加入projectName作为依赖
   

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