如何使用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;时间}))要显示网格，可以使用display: grid