如何在react js URL中傳遞參數從api獲取數據

Question

我在 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 中，我想作為參數傳遞以獲取特定數據或用戶選擇的數據。 怎么做？

Answer 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)
    })
}