我正在使用 Ionic React 创建一个显示温度的应用程序。我已经设置了一个 API,用于发送 MQTT 温度数据并使用 Axios 获取数据。我试图弄清楚这是否是检索数据的最佳方式,因为我不断收到错误消息。
获取 API
routes.get('/', (req, res, next) => {
let parsed = parseInt(test);
res.status(200).json({ temp: parsed })
})
Axios 和 React 代码
import './ExploreContainer.css';
import React, { Component } from 'react';
import axios from "axios";
interface ContainerProps { }
const sendGetRequest = () => {
return axios({
url: `http://localhost:3000/temps`,
method: 'get'
}).then(response => {
console.log(response);
return response.data;
})
};
const ExploreContainer: React.FC<ContainerProps> = () => {
const [items, setItems] = React.useState([]);
React.useEffect(() => {
sendGetRequest().then(data => setItems(data.articles));
}, []);
return (
<div className="container">
{
items.map(item => {
return (
{item}
);
})
}
</div>
);
};
export default ExploreContainer;
我得到的错误是 TypeError: Cannot read property 'map' of undefined
我知道这与它期望在 useState()
函数上有一个数组有关,但是如果我删除该数组,它仍然不会显示温度。我应该在 useState()
函数中插入什么来期待我发送的数据,或者我应该修改我发送温度的方式还是应该以不同的方式来做?
刚刚更新!我发现我做了什么。
sendGetRequest().then(data => setItems(data.temps));
我试图访问 data.articles(当没有文章对象时。我有一个临时对象)
然后在我的快速路线上,我需要将温度包含在一个数组中
routes.get('/', (req, res, next) => {
let parsed = parseInt(test);
res.status(200).json({ temps: [parsed] })
})
因为 react 正在寻找一个数组:
const [items, setItems] = React.useState([]);