You could use pnp.js in spfx.
Sample code:
import * as React from 'react';
import styles from './GetlistitemsReact.module.scss';
import { IGetlistitemsReactProps } from './IGetlistitemsReactProps';
import pnp, { Web } from 'sp-pnp-js'
import { escape } from '@microsoft/sp-lodash-subset';
import { ClassCustomer, User } from './ClassCustomer';
import {ISPListCustomerItem} from './ICustomers'
import $ from "jquery";
export default class GetlistitemsReact extends React.Component<IGetlistitemsReactProps, any> {
public constructor(props:IGetlistitemsReactProps,any)
{
super(props);
this.state={
items:[],
users:[]
}
}
public render(): React.ReactElement<IGetlistitemsReactProps> {
return (
<div className={ styles.getlistitemsReact }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<div className={ "ms-Grid" }>
<div className={ "ms-Grid-row" }>
{
this.state.users.map((user) =>{
return <div>
<span>{user.name}</span>+++++<span>{user.group}</span><br/>
<br/>
</div>
})
}
</div>
</div>
</div>
</div>
</div>
</div>
);
}
public componentDidMount()
{
this._getListCustomerData();
}
private async _getListCustomerData():Promise<void>
{
let items;
let web = new Web(this.props.context.pageContext.web.absoluteUrl);
await web.siteGroups.get().then
((response)=>{
items=response.map(item=>{
return new ClassCustomer(item)});
this.setState({items});
}
)
let users:Array<User> =[];
items.forEach(element => {
web.siteGroups.getByName(element.LoginName).users.get().then((response)=>{
response.map(item=>{
let user=new User(item.Title,element.LoginName);
users.unshift(user)
})
this.setState({users});
})
});
}
}
Test result:

I did not deduplicate the users array, if you need to deduplicate, you need to write it by yourself.
Updated:
IGetlistitemsReactProps.ts
import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface IGetlistitemsReactProps {
description: string;
context:WebPartContext;
}
ClassCustomer.ts
import { ISPListCustomerItem } from "./ICustomers";
export class ClassCustomer{
public LoginName:string;
constructor(item: ISPListCustomerItem) {
this.LoginName = item.LoginName;
}
}
export class User{
public name:string;
public group:string;
constructor(name: string,group:string) {
this.name = name;
this.group=group;
}
}