如何使用React Table和Axios進行API調用並將其顯示在React JS中？

我是React的新成員，我必須從API獲取數據並將其顯示在表中。我使用React Table來顯示錶格中的數據。如何實現以上？目前我沒有看到谷歌Chrome開發人員控制檯中的服務器響應。 React Table實現使用本地數據，但是從API填充表不起作用。我的代碼如下：如何使用React Table和Axios進行API調用並將其顯示在React JS中？

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;

來源

2017-08-30 SeaWarrior404

當你console.log（response）''時它會記錄什麼？ – bennygenel

> app.js：139699 Uncaught錯誤：模塊構建失敗：SyntaxError：相鄰的JSX元素必須封裝在封閉標記中（100：8） > /src/components/dashboard/tableSupport/tableExp.js 模塊構建失敗： SyntaxError：相鄰的JSX元素必須封裝在封閉標籤（100：8）中 – SeaWarrior404

@ SeaWarrior404，'console.log（response）'，而不是'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>

有你的解決方案：link to jsbin

我已經做模擬API爲你的榜樣，我用。您可以檢查它here

幾句話，我提出修正：

財產「數據」在ReactTable改爲數組
固定存取值（檢查documentation）

待辦事項不注意ReactTable.default（它是瀏覽器env例子所必需的）

來源

2017-08-30 12:37:24 chuve

工程就像一個魅力！非常透徹的回答，謝謝！ – SeaWarrior404

如何使用React Table和Axios進行API調用並將其顯示在React JS中？

回答

相關問題