React组件调用外部封装的axios请求函数返回undefined如何解决

问题原因 #

• 你的getAllCrimes函数没有显式返回值：内部axios.get的回调里的return只作用于then的回调函数，外层函数没有把异步请求的结果返回出来
• axios.get本身是异步操作，返回的是Promise对象，不能在同步执行的render方法里直接调用拿到返回结果
• React组件的渲染是同步流程，异步请求的结果必须存入组件state，触发重渲染后才能在视图层使用

修复步骤 #

第一步：修改apiService.js，返回请求的Promise对象 #

import axios from "axios";

const url = "/getCrimesByCategory/AUTO_THEFT";

export function getAllCrimes() {
    // 外层添加return，把axios返回的Promise暴露给调用方
    return axios.get(url).then(response => {
        console.log(response.data)
        // 直接返回接口数据，后续调用不需要再层层取data
        return response.data;
    })
}

第二步：修改dataPage.js，在生命周期中发起请求并存入state #

不要在render方法中发起请求，render会随组件状态更新多次触发，重复发起请求会造成性能浪费，且无法同步拿到异步结果：

import React, { Component } from 'react';
import { MDBDataTable } from 'mdbreact';
import '../App.css';
import { getAllCrimes } from '../controller/ApiService.js';

class DataPage extends Component {
  // 初始化组件状态，存储请求结果、加载状态、错误信息
  state = {
    crimeData: null,
    isLoading: true,
    errorMsg: ''
  }

  // 组件挂载完成后发起异步请求
  componentDidMount() {
    getAllCrimes()
      .then(data => {
        // 请求成功，更新状态触发重渲染
        this.setState({
          crimeData: data,
          isLoading: false
        })
      })
      .catch(err => {
        // 请求失败，捕获异常更新状态
        this.setState({
          errorMsg: err.message,
          isLoading: false
        })
      })
  }

  render() {
    const { crimeData, isLoading, errorMsg } = this.state;

    // 不同状态返回对应视图
    if (isLoading) return <p>数据加载中...</p>
    if (errorMsg) return <p>请求出错：{errorMsg}</p>

    return (
      <p>this is str: {JSON.stringify(crimeData)}</p>
      // 后续需要渲染MDBDataTable时，直接处理crimeData传入组件即可
    );
  }
}

export default DataPage;

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