使用API在ReactTable中创建数据

Question

我是React.js新手，我想在这里使用这个API：https://atlas.api.barclays/open-banking/v2.2/branches来创建一个包含巴克莱分支机构数据的表。我的问题是，当我呈现应用程序时，我似乎不能将数据上传到表中，只能上传列的标题。任何帮助都将不胜感激。谢谢!

import React, { Component } from 'react'
import axios from 'axios'
import ReactTable from "react-table-6"; 
import 'react-table-6/react-table.css';

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      branches: [],
      loading:true
    }
  }
  async getBranchesData(){
    const data = await axios.get('https://atlas.api.barclays/open-banking/v2.2/branches')
    console.log(data.Branch)
    this.setState({loading:false, branches: data.Branch})
  }
  componentDidMount(){
    this.getBranchesData()
  }
  render() {
    const columns = [
      {  
      Header: 'Identification',  
      accessor: 'Identification',
     }
     ,{  
      Header: 'Sequence Number',  
      accessor: 'SequenceNumber' ,
      }
     
     ,{  
     Header: 'Name',  
     accessor: 'Name' ,
     }
     ,{  
     Header: 'Type',  
     accessor: 'Type',
     }
     ,{  
     Header: 'Photo',  
     accessor: 'Photo',
     }
     ,{  
     Header: 'Customer Segment',  
     accessor: 'CustomerSegment',
     }
     ,{  
     Header: 'Service and Facility',  
     accessor: 'ServiceAndFacility',
     }
     ,{  
     Header: 'Accessibility',  
     accessor: 'Accessibility',
     }
     ,{  
     Header: 'Other Accessibility',  
     accessor: 'OtherAccessibility',
     }
     ,{  
     Header: 'Other Service and Facility',  
     accessor: 'OtherServiceAndFacility',
     }
     ,{  
     Header: 'Availability',  
     accessor: 'Availability',
     }
     ,{  
     Header: 'Contact Info',  
     accessor: 'ContactInfo',
     }
     ,{  
     Header: 'Postal Address',  
     accessor: 'PostalAddress',
     }
  ]
    return (
     <ReactTable  
      data={this.state.branches}  
      columns={columns} />
    )
  }
} ```

Answer 1

更改下一行：

this.setState({loading:false, branches: data.Branch})

为此：

this.setState({loading:false, branches: data.Brand.Branch})

Answer 2

问题出在你使用React Table库的方式上。它只提供表实用程序，而不是您试图使用的表组件。您可以在他们的文档中查看此basic usage example，以尝试适合您的用例。

您可以使用HTML表元素或任何UI组件库(如Bootstrap或Material UI)来呈现您的表，但这取决于您。

Answer 3

看看api的响应。

const response = {
    meta: {},
    data: [
        {
            "Brand": [
                {
                    "BrandName": "Barclays UK",
                    "Branch": [
                        {
                            "Identification": "UK-B-20533008",
                            // etc
                        },
                        {
                            "Identification": "UK-B-20533008",
                            // etc
                        },
                        // etc
                    ]
                }
            ]
        }
    ]
};

我想你想要data.data.Brand.Branch。