如何使用 axios 獲取和映射 api 響應數據

Question

向 API 發送請求並在控制台中獲取 API 響應，返回數據將為object 。

API RESPONSE:

請參閱此處： Json API 響應

現在如何使用 axios 在網頁上顯示數據。 下面的代碼顯示了如何調用 API

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

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

        this.state = {
            key: '10-10-21',
            // Where data will be saved.
            data: [],
        }
        console.log(this.state)
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = e => {
        e.preventDefault()
        
        axios
        .get(`http://127.0.0.1:8000/hgetall_hash?key=${this.state.key}`)
        .then(response => {
                        // Updating the state to trigger a re-render       
            this.setState({data: response.data});
            console.log(response.data)
        })
        .catch(error => {
            console.log(error)
        })
    }

    render() {
        const { key } = this.state
        
        return (
            <center><div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <h2> DATE PICKER</h2><br></br>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />                        
                    </div>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>
            </div></center>
        )
    }
}
export default PostForm

從這段代碼到將響應存儲在變量和地圖中，在網格視圖中顯示數據。

Answer 1

響應將存儲在您在 this.state 中定義的數據中。

this.state.data.map((item)=>( {item.time} )) 顯示的是網格你可以使用 display: grid