SPFx应用中列表用户名控制台可见但map渲染无内容问题

我开发了一个简单的SPFx应用，旨在从SharePoint Online的名为「Users」的列表中获取数据。使用PnP SP获取列表项时，Chrome开发者工具的网络面板显示状态码200，且能看到获取到的数据，但尝试用map函数展示数据时，页面上没有任何内容。

组件代码 #

export interface IListOfUsersProps {
    context: WebPartContext;
}

export const ListOfUsers: React.FunctionComponent<IListOfUsersProps> = (props: React.PropsWithChildren<IListOfUsersProps>) => {
    let listUsersProvider = new ListUsersProvider(props.context);

    const [userList, setUserList] = React.useState<IUser[]>([]);

    const fetchUserListData = async (): Promise<void> => {
        const allUsersFromList: IUser[] = await listUsersProvider.getUsers();

        setUserList(allUsersFromList)
    }

    React.useEffect(() => {
        fetchUserListData().catch((error) => console.log(error));
    }, [])

    return (
        <div>
            <Stack tokens={{ childrenGap: "3px" }} horizontal>
                {userList.map((user) => {
                    <div>
                        {user.Username} //此内容不显示
                        {console.log(user.Username)} //控制台能显示数据
                    </div>
                })}
            </Stack>
        </div>
    );
};

数据获取提供者类代码 #

export interface IListUsersProvider {
    getUsers(): Promise<IUser[]>
}

export default class ListUsersProvider implements IListUsersProvider {
    private _sp: SPFI;

    constructor(context: WebPartContext) {
        this._sp = spfi().using(SPFx(context));
    }

    public async getUsers(): Promise<IUser[]> {
        const items: IUser[] = await this._sp.web.lists.getByTitle("Users").items();

        return items;
    }
}

模型类代码 #

export interface IUser {
    ID: number;
    Username: string;
    FOW: string;
    Age: number;
}

我原本认为代码没有问题，但控制台和网络面板有数据却无法渲染的情况不符合预期，希望得到指导和解释。

问题解决 #

我发现是忘记在map函数中添加return语句了，正确写法如下：

<Stack tokens={{ childrenGap: "3px" }} horizontal>
    {userList.map((user) => {
        return (
            <Text>{user.Username}</Text>
        )
    })}
</Stack>

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