使用 axios 在网页上获取 API 控制台数据

Question

我创建了一个简单的日期选择器 react js，之后我调用 API 并在控制台中从 API 获取一些数据，现在我想获取 API 上的数据网页。

这是我用来调用API函数的代码，我想要网页上的地图响应数据

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

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

        this.state = {
            key: '',

            
        }
        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/hvals_hash?key=${this.state.key}`)
        .then(response => {
            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

首先，您必须将数据保存在应用内的某处。创建状态并使用 setState 更新它。现在你有了最新的数据，你可以使用 JSX 的魔法来使用 map 来显示它们。示例：

<div>
  {this.state.data.map((dataObjectToDisplay) => {
    return (
      <div>
        {/* Include your data in a way you want here, you can also replace the div with any other element (li) */}
      </div>
    );
  })}
</div>

Answer 2

<div>
  {this.state.data.map((dataObjectToDisplay) => {
    return (
      <div>
        {/* Include your data in a way you want here, you can also replace the div with any other element (li) */}
      </div>
    );
  })}
</div>

Answer 3

这里是对这个问题的解释，你可以参考这里，

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

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

        this.state = {
            key: '',
            // 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/hvals_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>
{this.state.data.map((dataObjectToDisplay) => {
    return (
    <div>
        {
            <ol>{this.state.data}</ol>
        }
    </div>
    );
})}
</div>
    
            </div></center>
        )
    }
}
export default PostForm

添加一个状态（添加一个对象属性到this.state）并在提交处理程序中，在Axios中获得响应后，使用setState({[状态名称]: response.data }).

这负责更新状态。至于显示在什么位置，由你决定。

您可以将代码复制到 render 方法中的任何位置。如果你想把它显示在表格下面，把它粘贴到表格后面的div容器里。

为了更好地控制状态，您可以检查一种状态管理工具，如 redux，或者简单地使用全局上下文并使用 react-router 实现路由 –

感谢@MrCeRaYA

使用 axios 在网页上获取 API 控制台数据

Fetch API Console data on webpage using axios

javascript

python

date-range

reactjs