React报错：Cannot read properties of undefined (reading 'map') 求助

核心错误原因 #

• groupTeamMembers函数无返回值：该函数内部创建了分组数组teams，但未通过return teams返回结果，导致useState(groupTeamMembers)初始化时groupedEmployees为undefined，调用map直接报错。
• 未监听props变化更新数据：分组逻辑依赖employees和selectedTeam props，但组件初始化后，props变化时分组数据不会自动更新，导致数据不同步。
• handleTeamClick逻辑错误：!groupedData是对整个对象取反，应改为!groupedData.collapsed，否则会错误设置折叠状态。

修复后的GroupedTeamMembers.jsx代码 #

import { useState, useEffect } from "react";

const GroupedTeamMembers = ({employees, selectedTeam, setTeam}) => {

    const [groupedEmployees, setGroupedData] = useState([]);

    function groupTeamMembers() {
        const teams = [];

        const teamAMembers = employees.filter((employee) => employee.teamName === 'TeamA');
        teams.push({ team: 'TeamA', members: teamAMembers, collapsed: selectedTeam !== 'TeamA'});

        const teamBMembers = employees.filter((employee) => employee.teamName === 'TeamB');
        teams.push({ team: 'TeamB', members: teamBMembers, collapsed: selectedTeam !== 'TeamB'});

        const teamCMembers = employees.filter((employee) => employee.teamName === 'TeamC');
        teams.push({ team: 'TeamC', members: teamCMembers, collapsed: selectedTeam !== 'TeamC'});

        const teamDMembers = employees.filter((employee) => employee.teamName === 'TeamD');
        teams.push({ team: 'TeamD', members: teamDMembers, collapsed: selectedTeam !== 'TeamD'});
        
        return teams;
    }   

    // 初始化及props变化时更新分组数据
    useEffect(() => {
        setGroupedData(groupTeamMembers());
    }, [employees, selectedTeam]);

    function handleTeamClick(event) {
        const transformedGroupData = groupedEmployees.map((groupedData) => 
            groupedData.team === event.currentTarget.id 
                ? {...groupedData, collapsed: !groupedData.collapsed}
                : groupedData
        );

        setGroupedData(transformedGroupData);
        setTeam(event.currentTarget.id);
    }

    return (
        <main className="container">
           {
            groupedEmployees.map((item) => (
                <div key={item.team} className='card mt-2' style={{cursor:"pointer"}} onClick={handleTeamClick}>
                    <h4 id={item.team} className="card-header text-secondary bg-white">
                        Team Name: {item.team}
                    </h4>
                    <div id={"collapse_" + item.team}
                        className={item.collapsed ? "collapse" : ""}>
                        <hr />
                        {
                            item.members.map(member => (
                                <div key={member.id} className="mt-2">
                                    <h5 className="card-title mt-2">
                                        <span className="text-dark">Full Name: {member.fullName}</span>
                                    </h5>
                                    <p>Designation: {member.designation}</p>
                                </div>
                            ))
                        }
                    </div>
                </div>
            )) 
           }
        </main>
    );
};

export default GroupedTeamMembers;

额外优化说明 #

• 给成员列表的子元素添加key={member.id}，符合React列表渲染规范，避免警告。
• 简化collapsed判断逻辑，用selectedTeam !== 'TeamX'替代冗余的三元表达式。
• 将var替换为const，遵循现代JS编码规范。
• 修正Bootstrap类名笔误：mt2改为mt-2，collap改为collapse。

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