我不确定为什么e.target.value的值未定义。
type State = {
filterCountry: string,
};
export default class Developers extends Component {
constructor(props) {
super(props);
this.state = {
developers: [],
};
}
componentDidMount() {
fetch('API').then(features => {
return features.json();
}).then(data => {
let developers = data.features.map((info) => {
const developer_info = {
id: info.id,
name: info.properties.name,
skills: info.properties.skills_full,
location: info.properties.location,
description: info.properties.description,
email: info.properties.email,
country: info.properties.continent
}
return developer_info;
});
this.setState({ developers: developers})
})
}
filter(e) {
this.setState({filter: e.target.value})
}
filterCountry(e){
this.setState({filterCountry: e.target.value})
}
render() {
if(this.state.filterCountry){
developers = developers.filter( developer =>
developer.country
.includes(this.state.filterCountry))
}
return (
<ControlSelect
id="country-select"
onChange={this.filterCountry.bind(this)} value={this.state.filterCountry}
options={options_dd2}
/>
</div>
尝试按照这个例子 create a dropdown in react to show/hide fetch data based on object class
答案 0 :(得分:1)
看起来问题来自ControlSelect
,它没有设置e.target.value
属性。
我相信如果您只使用带有选项的Select元素
return (
<div>
<select onChange={this.filterCountry.bind(this)} value={this.state.filterCountry}>
<option value="value">All Champs</option>
<option value="Assassin">Assassin</option>
<option value="Fighter">Fighter</option>
<option value="Mage">Mage</option>
<option value="Marksman">Marksman</option>
<option value="Support">Support</option>
<option value="Tank">Tank</option>
</select>
</div>
)