Javascript 下拉过滤器-为什么e.target.value在更改时未定义？

我不知道为什么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>

类型状态={
filterCountry:字符串，
};
导出默认类开发人员扩展组件{
建造师（道具）{
超级（道具）；
此.state={
开发商：[]，
};
}
componentDidMount（）{
获取（'API'）。然后（功能=>{
返回features.json（）；
})。然后（数据=>{
让开发者=data.features.map（（信息）=>{
常量开发者信息={
id:info.id，
名称：info.properties.name，
技能：info.properties.skills\u完整，
位置：info.properties.location，
description:info.properties.description，
电子邮件：info.properties.email，
国家：info.properties.containment
}
返回开发者信息；
});
this.setState（{developers:developers}）
})
}
过滤器（e）{
this.setState（{filter:e.target.value}）
}
过滤国家（e）{
this.setState（{filterCountry:e.target.value}）
}
render（）{
if（this.state.filterCountry）{
开发者=开发者。过滤器（开发者=>
开发者国家
.包括（此.state.filterCountry））
}
返回(

试着效仿这个例子

---

看来问题出在

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

返回(
所有冠军
莎辛那
战士
法师
射手
支持
坦克
)

什么是

ControlSelect

？它是否设置了

e.target.value

属性？显示完整的

e

内容。PS：如果您发布了正确缩进的代码，这也会很有帮助。为什么值是

this.state.filterCountry

并且不在状态构造函数中？我们可以忽略ControlSelect，它不设置e、 目标价值property@liam我不确定..我有点糊涂，…不是100%确定所有事情好吧，在你的构造函数中创建一个

filterCountry

状态，像这样

filterCountry:“value'

。好吧..很奇怪，bc这段代码..对开发人员有影响..这使得它没有定义..这段代码不应该破坏开发elopers说，可能是其他原因造成的。我发现了问题，…最后一件事，…在控制台中，它总是显示之前的选择，而不是当前选择，…第一次单击下拉列表时，选择未定义。