调用巴克莱银行API获取网点数据渲染ReactTable仅显示表头问题求助

问题原因 #

• axios请求返回的响应对象中，接口返回的实际数据存放在data属性下，你直接读取data.Branch无法拿到目标数据。且巴克莱该接口的返回结构是嵌套结构，需要先取到Data字段才能拿到Branch数组。
• getBranchesData为普通异步函数，直接调用时内部this指向丢失，无法正常调用setState更新状态。

修正方案 #

直接替换你的getBranchesData方法即可，完整修正后代码如下：

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
    }
    // 绑定this指向，或者直接将方法改为箭头函数
    this.getBranchesData = this.getBranchesData.bind(this)
  }
  async getBranchesData(){
    // 先拿到axios响应对象，再取出接口返回的JSON数据
    const res = await axios.get('https://atlas.api.barclays/open-banking/v2.2/branches')
    const apiData = res.data
    // 按照接口嵌套结构取出Branch数组
    const branches = apiData.Data.Branch
    this.setState({loading:false, branches: branches})
  }
  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  
      loading={this.state.loading}
      data={this.state.branches}  
      columns={columns} />
    )
  }
}

你也可以将getBranchesData定义为箭头函数，省去手动绑定this的步骤：

getBranchesData = async () => {
  const res = await axios.get('https://atlas.api.barclays/open-banking/v2.2/branches')
  const branches = res.data.Data.Branch
  this.setState({loading:false, branches})
}

补充说明 #

如果调用时出现跨域报错，可以在本地开发时配置React代理，或者使用本地代理服务转发请求即可。

内容的提问来源于stack exchange，提问作者Maria