如何在网页上获取控制台日期反应 axios

Question

如何在 React js 中使用 axios 获取网页上的 api 数据，

预期：

通过 GET api 调用我在控制台中得到一些响应，现在我想在网页中打印该控制台数据

import React, { Component } from 'react'
import axios from 'axios'
// import { data } from 'jquery'
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

注意事项：

控制台中的数据，如数组数据 (24)

["["/home/fraction/FastAPI/videos/video1.mp4", "/home/fraction/FastAPI/videos/video2.mp4", "/home/fraction/FastAPI/videos/video3.mp4", "/home/fraction/FastAPI/videos/video4.mp4", "/home/fraction/FastAPI/videos/video5.mp4"]

Answer 1

您需要以某种状态存储您的 api 响应

取一个状态可以命名为 myVideoUrl
setState this with your response from api
然后您需要在此处导入视频播放器，以便此组件成为父组件，而您的视频播放器组件将成为子组件，然后将此状态 myVideoUrl 传递给您的子组件

import React, { Component } from 'react'
import axios from 'axios'
// import { data } from 'jquery'
class PostForm extends Component {
constructor(props) {
    super(props)

    this.state = {
        key: '',
        myVideoUrl: ''
    }
    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)
            this.setState({ myVideoUrl: response })
        })
        .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>
        //im assuming your child component here
            <MyVideoPlayer url={this.state.myVideoUrl} />
        </div></center>
    )
}}
export default PostForm

之后您可以在您的子组件中访问 this.props.url

如何在网页上获取控制台日期反应 axios

How to fetch console date on webpage react axios

javascript

api

reactjs

axios

fastapi