react.js axiosを使用してapiを取得する

create-react-app react-app

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install axios　@material-ui/core material-table 

{
    "content": [
        {            
            "ipAddresses": [
                "192.168.xxx.xxx"
            ],
            "macAddresses": [
                "xx-xx-xx-xx-xx-xx"
            ],         
            "description": "",
            "computerName": "mebee-pc",
            "logonUserName": "testuser",            
            "memory": 3210981398,            
            "osname": "Windows XP"
        }
    ]
}

import React, { Component } from 'react';
import axios from "axios";
import { Button } from '@material-ui/core';
import MaterialTable from 'material-table';

class Getpcinfo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      info: [],
      isLoading: true
    };
    this.getData = this.getData.bind(this);
  }

  getData() {
    axios
      .get('http://test.com/api/v1/computers?pageSize=100',{
        headers: {
          Authorization: "Bearer 8213f5cd-5fds2-4891-83d0-48d172ffab77"
        }
      })
      .then(results => {
        const data = results.data.content;        
        this.setState({
          info: data,
          isLoading: false
        });
      });
  }

  render() {
    const columns = [
      { title: 'IP', field: 'ipAddresses' },
      { title: 'user', field: 'logonUserName' },
      { title: 'hostname', field: 'computerName'},
      { title: 'memory', field: 'memory'},
      { title: 'osName', field: 'osName'},        
    ]
    
    return (
      <div>                           
        <MaterialTable
        title="PC INFO"
        columns={columns}
        data={this.state.info}
        isLoading={this.state.isLoading}
        options={{
          pageSize: 10,
          pageSizeOptions: [10, 20,50, 100, 200, 300, 400 ,500],
          toolbar: true,
          paging: true
        }}
        />        
        <Button variant="contained" color="primary" onClick={this.getData}>info get</Button>
      </div>
    )
  }
}

export default Getpcinfo

import React from 'react';
import Getpcinfo from './Getpcinfo';
import './App.css';

function App() {
  const style = {
    width: "50%",
    margin: "0 auto",
    marginTop: 150,
  };
  return (
    <div className="App">
      <div style={style}>
        <Getpcinfo />
      </div>
    </div>
  );
}

export default App;

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

npm start