我正在尝试将MERN应用程序的前端连接到后端。后端本身工作得很好,我通过手动执行HTTP请求访问数据也没有问题。现在我正在尝试将它连接到前端,但似乎到处都卡住了。
我目前的问题是,当我尝试通过HTTP请求获取数据时,DOM消失并显示空白页面。
import React, {useEffect, useState} from "react"
import ItemRequests from "./dataservices/items.js"
function ItemList(props){
[items, setItems] = useState([])
useEffect(() => {
ItemRequests.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*/}
)
}
ItemRequests类别:包含特定于Items集合的所有请求
import http from "http-config"
class ItemRequests{
getAll(page = 0){
return http.get("?page=" + page)
}
}
export default ItemRequests
http配置文件
import axios from "axios"
export default axios.create(){
baseURL: "https://localhost:XXXX/route/to/server",
headers: {
"Content-type": "application/json"
}
}
前端的所有其他路由都正常工作。只有这个执行HTTP请求的路由没有正确呈现。我现在正在调试,看看是否可以获得更多的细节,但我希望从这里获得任何见解。
编辑:根据我的浏览器的控制台:
未捕获的类型错误:* 服务项目__WEBPACK_IMPORTED_MODULE_1 *_.默认值.getAll不是函数
因此,由于某种原因,JS无法将getAll()识别为函数,即使它已定义。
2条答案
按热度按时间bxpogfeg1#
你的“ItemList”方法对我来说似乎完全坏了,就像你复制/粘贴的东西,把它混得很糟糕。
我没试过,但也许这是正确的方法:
}
也许你给予试试?
bmvo0sr52#
ItemsRequests
是一个类。您不能直接从类调用非静态函数。因此,要使此代码正常工作,您需要执行以下两项操作之一:1.在
useEffect()
内示例化ItemsRequest
类型的对象或者2.使
ItemsRequests
中的getAll()
方法成为静态方法就本程序而言,选择第二个选项更有意义。