Wie Sie die API aufrufen und in React JS mit React Table und Axios anzeigen lassen?

Ich bin neu zu reagieren und ich muss Daten von einer API abrufen und in einer Tabelle anzeigen. Ich verwende die React Table für die Anzeige der Daten in der Tabelle. Wie implementiert man das oben genannte? Derzeit sehe ich keine Antwort vom Server in der Google Chrome-Entwicklerkonsole. Die React Table-Implementierung arbeitet mit lokalen Daten, das Füllen der Tabelle von einer API funktioniert jedoch nicht. Mein Code ist wie folgt:Wie Sie die API aufrufen und in React JS mit React Table und Axios anzeigen lassen?

class TableExp extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     tableData: { 
     resourceID: '', 
     resourceType: '', 
     tenantName: '', 
     dealerID: '', 
     status: '', 
     logFilePath: '', 
     supportPerson: '', 
     lastUpdatedTime: '', 
     }, 
    }; 
} 

componentDidMount() { 
    axios.get(`https://myAPI.restdb.io/rest/mock-data`, { 
    headers: {'x-apikey': 'apiKEY'} 
    }) 
.then(response => { 
     this.setState({ tableData: response.data.tableData }); 
     //console.log(tableData); 
});} 

    render() { 
    const { tableData } = this.state; 

    return (
     <div> 
     <ReactTable 
      data={tableData} 
      columns={[ 
       { 
       Header: 'Details', 
       columns: [ 
        { 
        Header: 'Tenant Name', 
        accessor: '{this.state.tableData.tenantName}', 
        }, 
        { 
        Header: 'Support Engineer', 
        id: '{this.state.tableData.supportEngineer}', 
        accessor: d => d.supportPerson, 
        }, 
       ], 
       }, 
       { 
       Header: 'Info', 
       columns: [ 
         { 
          Header: 'Dealer ID', 
          accessor:'{this.state.tableData.dealerID}', 
         }, 
         { 
          Header: 'Status', 
          accessor:'{this.state.tableData.status}', 
         }, 
         ], 
       }, 
       { 
       Header: 'Logs', 
       columns: [ 
         { 
          Header: 'File Path', 
          accessor:'{this.state.tableData.filePath}', 
         }, 
         ], 
       }, 
      ]} 
      defaultPageSize={10} 
      className="-striped -highlight" 
     /> 
    </div> 
    ); 
} 
    } 

    export default TableExp;

Quelle

2017-08-30 SeaWarrior404

was loggt es wenn Sie 'console.log (Antwort)'? – bennygenel

> app.js: 139.699 Nicht abgefangene Fehler: Modul Build fehlgeschlagen: Syntaxerror: > /src/components/dashboard/tableSupport/tableExp.js Modul Build fehlgeschlagen: Angrenzend JSX Elemente müssen in einem umschließenden Tag (8 100) gewickelt werden: SyntaxError: Benachbarte JSX-Elemente müssen in ein umschließendes Tag (100: 8) eingebettet werden: – SeaWarrior404

@ SeaWarrior404, 'console.log (response)' und nicht 'console.log (tableData);' – Andrew

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width-device-width, initial-scale-1"> 
    <script src="http://www.jimsproch.com/react/future/react.js"></script> 
    <script src="http://www.jimsproch.com/react/future/react-dom.js"></script> 
    <script src="http://www.jimsproch.com/react/babel-browser.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css"> 
</head> 
<body> 
<div id="root"></div> 
<script type="text/babel"> 
    class TableExp extends React.Component { 
     constructor() { 
      super(); 

      this.state = { 
       tableData: [{ 
        resourceID: '', 
        resourceType: '', 
        tenantName: '', 
        dealerID: '', 
        status: '', 
        logFilePath: '', 
        supportPerson: '', 
        lastUpdatedTime: '', 
       }], 
      }; 
     } 

     componentDidMount() { 
      axios.get('http://private-9ff5e-stackoverflow.apiary-mock.com/questions', { 
       responseType: 'json' 
      }).then(response => { 
       this.setState({ tableData: response.data }); 
      }); 
     } 

     render() { 
      const { tableData } = this.state; 

      return (<ReactTable.default 
          data={tableData} 
          columns={[ 
           { 
            Header: 'Details', 
            columns: [ 
             { 
              Header: 'Tenant Name', 
              accessor: 'tenantName', 
             }, 
             { 
              Header: 'Support Engineer', 
              id: 'supportEngineer', 
              accessor: d => d.supportPerson, 
             }, 
            ], 
           }, 
           { 
            Header: 'Info', 
            columns: [ 
             { 
              Header: 'Dealer ID', 
              accessor: 'dealerID', 
             }, 
             { 
              Header: 'Status', 
              accessor: 'status', 
             }, 
            ], 
           }, 
           { 
            Header: 'Logs', 
            columns: [ 
             { 
              Header: 'File Path', 
              accessor: 'logFilePath', 
             }, 
            ], 
           }, 
          ]} 
          defaultPageSize={10} 
          className="-striped -highlight" 
        /> 
      ); 
     } 
    }; 

    ReactDOM.render(<div><TableExp/></div>, document.getElementById("root")); 
</script> 
</body> 
</html>

Es Lösung für Sie: link to jsbin

I Mock api für Ihr Beispiel gemacht haben, dass ich verwendet. Sie können es here

Ein paar Worte über Korrekturen überprüfen, die ich gemacht:

Eigenschaft "data" in ReactTable auf ein Array
festen Zugriffswerte geändert (check documentation)

Do nicht auf ReactTable.default achten (es ist notwendig für Browser env Beispiel)

Quelle

2017-08-30 12:37:24 chuve

Funktioniert wie ein Charme! Sehr gründliche Antwort, Danke! – SeaWarrior404

Wie Sie die API aufrufen und in React JS mit React Table und Axios anzeigen lassen?

Antwort

Verwandte Themen