如何从后端API获取JSON数据并在React.js中通过Axios正常展示

已定位的核心代码问题 #

• Axios 方法误用：Axios 会自动将接口返回的JSON内容解析到响应对象的data字段，无需像原生fetch那样手动调用.json()方法。原代码中链式调用response.json的操作属于完全冗余的错误逻辑，且该方法在Axios响应对象上不存在，直接中断请求链路，导致数据无法正常赋值
• 缺失异常捕获分支：未配置.catch()处理请求失败场景，无论是网络中断、跨域拦截还是接口返回异常，都无法触发状态更新，界面始终无法拿到有效数据
• 无加载状态兜底：初始状态下walletInfo为空对象，直接渲染的地址、余额字段无任何内容提示，用户容易误判为页面故障

完整可运行的替换代码 #

import React, { Component } from 'react';
import './Sidebar.css';
import axios from 'axios';

class Dashboard extends Component {
  state = { 
    walletInfo: {},
    isLoading: true,
    loadError: null
  };

  componentDidMount() {
    const targetUrl = 'https://pure-reaches-69883.herokuapp.com/api/wallet-info';
    axios.get(targetUrl)
      .then(res => {
        this.setState({
          walletInfo: res.data,
          isLoading: false
        })
      })
      .catch(err => {
        this.setState({
          isLoading: false,
          loadError: err.message
        })
        console.error('钱包信息加载失败:', err)
      })
  }

  render() {
    const { address, balance } = this.state.walletInfo;
    const { isLoading, loadError } = this.state;

    return (
      <div className="ml-5 mb-5 mt-5 maincontent-area-all-pages">
        <div className="my-5 mx-4">
          <h2>钱包信息面板</h2>
          {isLoading && <div>数据加载中...</div>}
          {loadError && <div>数据加载失败，请检查网络后重试</div>}
          {!isLoading && !loadError && (
            <div className='WalletInfo'>
              <div>Address: {address}</div>
              <div>Balance: {balance}</div>
            </div>
          )}
        </div>
      </div>
    )
  }
}

export default Dashboard;

额外排查指引 #

修改代码后若仍无法正常获取数据，优先打开浏览器开发者工具的控制台查看报错：

• 若出现CORS跨域拦截提示，属于后端配置问题：由于Postman不受浏览器同源策略限制，此前可以正常调用接口，需要在Heroku部署的后端服务中配置允许前端域名跨域访问的响应头规则
• 若出现网络连接错误，核对接口地址拼写、本地网络连通性即可

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