React、複数のエンドポイントからフェッチしてテーブル内のデータをレンダリング

Question

私は残りのAPIを持っていますが、私はリアクションを使ってこれについていくつかのフロントエンドを書いています。私はいくつかのエンドポイントからデータを取得し、それをテーブルに表示する必要があります。 その瞬間、私は1つのエンドポイントからデータを取得してレンダリングしています。うまくいきます。エンドポイントへの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, 

どのようにした後、それをレンダリングするために、それはすべてのエンドポイントからデータを取得し、これから1つの配列を返すいくつかのモデルコンポーネントを記述するのは良いアイデアですか？

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

データを最初に結合してから、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> 
    ) 
}