通过 API 发送 MQTT 数据

发布时间:2021-03-06 14:52

我正在使用 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() 函数中插入什么来期待我发送的数据,或者我应该修改我发送温度的方式还是应该以不同的方式来做?

回答1

刚刚更新!我发现我做了什么。

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([]);