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

【问题标题】：How to fetch console date on webpage react axios如何在网页上获取控制台日期反应axios
【发布时间】：2021-11-25 20:09:14
【问题描述】：

如何在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"]

【问题讨论】：

在某个状态下存储响应？
这个答案对你有帮助吗？
@novonimo 先生您好，您有任何答案吗
您好 @Raghav 先生，由于我无法理解核心问题，因此我需要更多关于该问题的解释

标签： javascript reactjs api axios fastapi

【解决方案1】：

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

取一个状态可能名称为 myVideoUrl
用您从 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

【讨论】：

您能帮忙获取视频网址的响应数据