它是 SearchForm.js 类,它使用axios
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class SearchForm extends React.Component {
constructor(props) {
super(props)
this.state = {
position: '',
area: '',
period: '1',
experience: {
type: Array,
default: () => []
}
}
this.handleExperienceChange = this.handleExperienceChange.bind(this);
}
componentDidMount() {
axios({
method: 'GET',
url: 'https://example.com/dictionaries/',
headers: {
'User-Agent': 'React App/1.0 (tatyana.fomina.1986@gmail.com)',
'HH-User-Agent': 'React App/1.0 (tatyana.fomina.1986@gmail.com)',
'Content-Type': 'application/x-www-form-urlencoded',
}
})
.then((response) => {
console.log(response.data.experience);
this.setState({
experience: response.data.experience
});
console.log(this.experience);
})
.catch(function(error) {
console.log(error);
});
}
handleExperienceChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
render() {
return ( <
form className = 'form search-form'
onSubmit = {
this.handleSubmit
} >
<
div className = "form-row" >
<
div className = "form-group col-md-2" >
<
label htmlFor = "experience" > Experience *< /label> <
select className = "form-control"
name = "experience"
id = "experience"
onChange = {
this.handleExperienceChange
}
value = {
this.state.experience
} >
{
this.state.experience.length > 0 &&
<
option
key = {
this.state.experience.id
}
value = {
this.state.experience.name
} > {
this.state.experience.name
} <
/option> }
<
/select> < /
div >
<
div className = "form-row" >
<
div className = "form-group col-md-12 pt-3" >
<
input id = 'form-button'
className = 'btn btn-primary'
type = 'submit'
placeholder = 'Send' / >
<
/div> < /
div > <
/form>
)
}
}
export {
SearchForm
}
console.log(response.data.experience);
显示包含id
和name
值的数组
但console.log(this.experience);
显示undefined
,options
保持为空。如何使用值呈现选项并将第一个选项的值设置为此选择的默认值?
答案 0 :(得分:0)
重新显示没有正确显示状态的console.log,可能是因为setState是异步的。尝试将console.log(this.state.experience)放在setState的回调中,而不是现在,看看会发生什么。
关于不起作用的选择,似乎您对选择选项和用户选择的值使用一个状态变量...
最后一件事:我只看到一个选项标记,而不是axios调用返回的所有值的多个选项标记。
我希望这会有所帮助。