如何在react js URL中传递参数以从api获取数据

哈里帕萨斯·拉克什马南

我在 react js 中创建了一个简单的日期选择器用户界面，从下拉列表中选择一个日期，我的快速 API 与 Redis 连接，现在如何将数据存储在变量中并在 URL 中使用该变量从 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()
            console.log(this.state)
            axios
                .get('http://127.0.0.1:8000/hvals_hash?key=30/8/21')
                .then(response => {
                    console.log(response)
                })
                .catch(error => {
                    console.log(error)
                })
        }
    
        render() {
            const { key } = this.state
            return (
                <div>
                    <form onSubmit={this.submitHandler}>
                        <div>
                            <input
                                type="text"
                                name="key"
                                value={key}
                                onChange={this.changeHandler}
                            />
                        </div>
    
                        <button type="submit">Submit</button>
                    </form>
                </div>
            )
        }
    }
    
    
    
    export default PostForm

在该 URL 中，我想作为参数传递以获取特定数据或用户选择的数据。怎么做？

诺沃尼莫

您key在组件的商店中定义并存储，因此只需编辑URL地址并将其放置key在其上。

submitHandler = e => {
  e.preventDefault()
  
  axios
    .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`)
    .then(response => {
      console.log(response)
     })
    .catch(error => {
      console.log(error)
    })
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。