如何在反应js URL中传递参数以从api获取数据答案

【问题标题】：How to pass paramter in react js URL to get data from api如何在反应js URL中传递参数以从api获取数据
【发布时间】：2021-10-04 12:04:08
【问题描述】：

我在 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 中，我想作为参数传递以获取特定数据或用户选择的数据。该怎么做？

【问题讨论】：

您的日期选择器代码在哪里，这是什么代码的问题？
@RobertRocha 我现在从控制台中的 API 获得响应我如何在网页上获取响应

标签： javascript reactjs api

【解决方案1】：

您定义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)
    })
}

【讨论】：

@thanks 很多它的工作正常