动态下拉列表react axios get请求
动态下拉列表react axios get请求
提问于 2018-07-03 02:26:00
在我的主要App.js componentDidMount()生命周期阶段中，我有一个对rest服务的axios get请求。
编辑:包含完整的UserForm.js
class App extends Component {
// default state object
constructor() {
super();
this.state = {
schemas: []
}
}
componentDidMount() {
axios
.get('/dataschema/list')
.then(response => {
console.log(response)
this.setState({
schemas: response
});
})
.catch(error => console.log(error.response));
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">App</h1>
</header>
<LinkButton />
<UserForm schemas={this.state.schemas} />
</div>
);
}
}此请求成功返回控制台消息中的模式(字符串)数组(目前仅返回1个
Response:
{
"data": [
"Phone Record"
]如何使用axios get请求返回的Phone Record填充此UserForm.js下拉列表
import React from 'react';
import PropTypes from 'prop-types';
class UserForm extends React.Component {
constructor() {
super();
this.state = {schemas: []};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.data});
}
handleSubmit(event) {
alert('The dataschema you picked is: ' + this.state.schemas);
event.preventDefault();
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Pick the dataschema to describe your data file:
<select value={this.state.value} onChange={this.handleChange}>
{
(schemas && schemas.length > 0) && schemas.map((schema) => {
return (<option value="${schema.value}"> {schema.name}</option>);
})
}
</select>
</label>
</form>
</div>
);
}
}
export default UserForm;回答 1
Stack Overflow用户
发布于 2018-07-03 02:44:00
将记录传递给UserForm的解决方案
componentDidMount() {
const self = this;
axios
.get('http://localhost:port/api/rest/dataschema/list')
.then(response => {
console.log(response)
self.setState({ phoneRecords: response })
})
.catch(error => console.log(error.response));
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">App</h1>
</header>
<LinkButton />
<UserForm phoneRecords={this.state.phoneRecords}/>
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51141856
复制相关文章
相似问题