通过 API 发送 MQTT 数据答案

【问题标题】：Sending MQTT data via API通过 API 发送 MQTT 数据
【发布时间】：2021-06-04 23:39:45
【问题描述】：

我正在使用 Ionic React 创建一个显示温度的应用程序。我设置了一个 API，用于发送 MQTT 温度数据并使用 Axios 获取数据。我试图弄清楚这是否是检索数据的最佳方式，因为我不断收到错误。

GET 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(res => setItems(res.data.articles)); 和（可选，不是解决问题所必需的）删除... .then(response => { console.log(response); return response.data; }) 检查stackoverflow.com/q/14220321/2873538

标签： node.js reactjs typescript ionic-framework npm

【解决方案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([]);

【讨论】：