将 Gitlab API 对象渲染为列表

Question

我得到了这段代码，它从 API.

拉取了 gitlab 用户

import React from 'react'
import {PageHeader} from "antd";
import { Gitlab } from '@gitbeaker/browser';

const api = new Gitlab({
    host: 'https://sample.com',
    token: 'asda',
});

class agileMetrics extends React.Component {
    async componentDidMount(){
        const users = await api.Users.all()
        console.log(users)
    }

    render() {
        return (
            <div>
                <PageHeader
                    className="site-page-header"
                    title="Metrics"
                    subTitle="..."
                />
            </div>
        );
    }
}

export default agileMetrics;

并且它适用于控制台：

如何在我的页面正文中将这些用户显示为列表？

Answer 1

将数据置于状态并映射到数组以生成元素数组：

mport React from 'react'
import {PageHeader} from "antd";
import { Gitlab } from '@gitbeaker/browser';

const api = new Gitlab({
    host: 'https://sample.com',
    token: 'asda',
});

class agileMetrics extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            users: []
        }
    }
    async componentDidMount(){
        const users = await api.Users.all()
        this.setState({users})
    }

    render() {
        return (
            <div>
                <PageHeader
                    className="site-page-header"
                    title="Metrics"
                    subTitle="..."
                />
                <ul>
                  {this.state.users.map(user => <li key={user.id}>{user.name}</li>)}
                </ul>
            </div>
        );
    }
}

export default agileMetrics;

将 Gitlab API 对象渲染为列表

Rendering Gitlab API object as a list

reactjs

gitlab-api