axios 在 reactJS 中获取请求

Question

我是 React 的新手，我正在学习如何使用 axios 获取 HTTP 请求。我指的是一个 youtube 视频：https://www.youtube.com/watch?v=NEYrSUM4Umw 并跟随，但我收到了一个错误。我想我有一个小错误，但我无法弄清楚。

import React, { Component } from 'react'
import axios from 'axios'

class PostList extends Component {
    constructor(props) {
        super(props)

        this.state = {
             posts: []
        }
    }


    componentDidMount(){

        axios.get('https://api.particle.io/v1/devices/64646468431646/temperature?access_token=547376a1b2')

        .then(response => {
            console.log(response)
            this.setState({posts: response.data})
        })
        .catch(error => {
            console.log(error)
        }
        )
    }

    render() {
        const { posts } = this.state
        return (
            <div>
                temperature
                {
                    posts.length ?
                    posts.map(post => <div key={post.coreInfo.deviceID}> {post.result} </div>) :
                    null
                }
            </div>
        )
    }
}
export default PostList

当我使用 postman 获取 HTTP 请求时，我得到以下响应：

{ "cmd": "VarReturn", "name": "temperature", "result": "67.55", "coreInfo": { "last_app": "", "last_heard": "2020-04-05", "connected": true, "last_handshake_at": "2020-04-05", "deviceID": "64646468431646", "product_id": 8 } }

我的目标是在 Web 应用程序中显示结果：67.55。

提前致谢

Answer 1

如果您只从获取的响应中获取单个对象而不是数组，只需将其包装在数组中即可 -

this.setState({posts: [response.data]})

axios 在 reactJS 中获取请求

axios get request in reactJS

api

get-request

reactjs

axios