执行HTTP请求时React DOM消失，调用getAll()报类型错误

问题现象 #

后端单独运行正常，手动发送HTTP请求可正常获取数据，但前端组件调用请求时页面直接空白，浏览器控制台报错：

Uncaught TypeError: services_items__WEBPACK_IMPORTED_MODULE_1_.default.getAll is not a function

问题根源与修复方案 #

1. getAll 无法直接通过类名调用

你定义的ItemRequests是类，getAll是实例方法，不能直接通过类名调用。有两种修复方式：

方式一：将方法改为静态方法
修改ItemRequests类：

import http from "http-config"

class ItemRequests{
   // 添加static关键字转为静态方法
   static getAll(page = 0){
      return http.get("?page=" + page)
   }
}

export default ItemRequests

方式二：创建类实例后调用方法
在ItemList组件中实例化ItemRequests：

import React, {useEffect, useState} from "react"
import ItemRequests from "./dataservices/items.js"

// 创建类实例
const itemService = new ItemRequests()

function ItemList(props){
   // 修复useState解构缺失const的问题
   const [items, setItems] = useState([])

   useEffect(() => {
      // 通过实例调用方法
      itemService.getAll()
      .then(results => {
          console.log(results)
          setItems(results.data)
      })
      .catch(e => {
          console.log(e)
      })

   }, [])

   return(
      <h6>If this prints the issue has been resolved</h6>
      {/*Additional code*/}
   )
}

2. http-config 语法错误

axios.create的调用语法错误，正确写法是传入配置对象，修改http-config：

import axios from "axios"

// 修正为axios.create({ ... })
export default axios.create({
   baseURL: "https://localhost:XXXX/route/to/server",
   headers: {
      "Content-type": "application/json"
   }
})

3. React组件中useState解构缺失声明关键字

原代码中[items, setItems] = useState([])缺少const，会导致语法错误，修正为：

const [items, setItems] = useState([])

说明 #

以上错误会导致JavaScript执行中断，进而使得React组件无法完成渲染，最终表现为页面空白。修复这些语法和调用方式问题后，组件就能正常渲染并发起请求。

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