javascript - 如何在反应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)
})
}
推荐阅读
- unity3d - 完成游戏后无法再次连接两个玩家自动谷歌玩游戏服务?
- sql - 将 SQL Server 动态游标转换为 Oracle
- php - 如果输入字段为空,则禁用提交按钮
- sql - 更新链接表'???' 失败的
- sql - 如何在 JOIN 语句中查找导致行重复的列?
- assembly-loading - 如何在不添加到 GAC 的情况下将程序集加载到默认加载上下文中?
- android - 如何从外部库中排除 java 文件?
- java - 如何使用 adb 端口转发?
- javascript - 如何从 Object Jasvscript 中删除属性?
- javascript - 如何按键合并对象数组?