Question

我有休息api，我为此写了一些前端（第一次使用react）。我需要从几个端点获取数据并将其显示在表中。 ~~就在那一刻，我从一个端点获取数据并进行渲染，并且工作正常。 Url到端点看起来像： http://localhost/app.php/api/endpointname/123?from=2017-05-05&to=2017-05-07~~

~~端点名称将是其中之一：访问，访客，入口。~~

所有端点都返回如下所示的对象：

2017-05-05: 5,
2017-05-06: 1,
2017-05-07: 4,

之后如何渲染它，编写一些模型组件从所有端点获取数据并从中返回一个数组是个好主意？

import React from 'react';
import ReactDOM from 'react-dom';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visits: [],
            visitors: [],
            entrances: [],
            type: props.type,
            reportFor: props.reportFor,
            websiteId: props.websiteId,
            date: props.date,
            dateTo: props.dateTo
        };
    }

    GetUrl(endpoint) {
        let date;
        if (this.state.type === 'daily') {
            date = 'from=' + this.state.date + '&to=' + this.state.dateTo;
        } else if (this.state.type === 'hourly') {
            date = 'day=' + this.state.date;
        }

        return 'http://localhost/app.php/api/'
            + this.state.type + '/'
            + endpoint + '/'
            + this.state.websiteId + '?'
            + date;
    }

    componentDidMount() {
        let endpoints = ['visits', 'visitors', 'entrances'];

        endpoints.map((endpoint) =>
            fetch(this.GetUrl(endpoint))
                .then((response) => response.json())
                .then((responseJson) => {
                    this.setState({
                    [endpoint]: responseJson
                    });
                }).catch((error) => {
                console.error(error);
            })
        )
    }

    render() {
        let visits = this.state.visits;
        let visitors = this.state.visitors;
        let headers = ['Date', 'Visits', 'Entrances', 'Visitors'];

        return (
            <div className="col-sm-6 col-md-6 col-lg-6 column">
                <table className="table table-hover">
                    <thead>
                    <tr>
                        {headers.map((header) => <th>{header}</th>)}
                    </tr>
                    </thead>
                    <tbody>
                    {Object.entries(visits).map(([date, visit]) => <tr>
                        <td>{date}</td>
                        <td>{visit}</td>
                    </tr>)}
                    </tbody>
                </table>
            </div>
        )
    }
}

ReactDOM.render(<App type='daily' reportFor='visits' websiteId='5d918b7d-91ca-4f15-95df-fd8c71a6c2b9' date='2017-05-05'
                 dateTo='2017-05-10'/>, document.getElementById('app'));

我将非常感谢您如何为较小的组件或其他内容重构此代码。它是我的第一个反应应用程序，我不知道如何分离组件。

问候

编辑：现在我从所有端点获取数据，但仍然不知道如何以正确的方式呈现结果。

Answer 1

您应首先合并数据，然后通过一个数组进行映射。

render() {
    // Combine arrays of data
    let combinedData = [...this.state.visits, ...this.state.visitors];
    let headers = ['Date', 'Visits', 'Entrances', 'Visitors'];

    return (
        <div className="col-sm-6 col-md-6 col-lg-6 column">
            <table className="table table-hover">
                <thead>
                <tr>
                    {headers.map((header) => <th>{header}</th>)}
                </tr>
                </thead>
                <tbody>
                {Object.entries(combinedData).map(([date, visit]) => 
                <tr>
                    <td>{date}</td>
                    <td>{visit}</td>
                </tr>)}
                </tbody>
            </table>
        </div>
    )
}

React，从多个端点获取并在表中呈现数据

1 个答案: