如何根据反应中的另一个选择器绑定一个选择器？

Question

我有一个包含 2 个选择器字段的输入表单 - 国家和城市。并且城市列表必须只上传当前国家的城市。选择国家后，我在该州拥有它。但是我在过滤城市列表时遇到了问题。当我写像 filter(key => key["country"] === 1 ) 时，其中 1 是国家的 ID，它可以工作。如果比较键["country"] === this.state.country 不起作用，我该如何使用该国的当前状态？

...
onChange = event => {
   this.setState({
      [event.target.name]: event.target.value
    });
  };

  getOptionItems = (Items) => Items.map(item =>
    <option key={item.id} value={item.id}>
      {item.name}
    </option>
  )

<div className="form-group">
            <label htmlFor="country">Country</label>
            <select
              className="custom-select"
              id="country"
              value={this.state.country}
              name="country"
              onChange={this.onChange}
            >
              {this.getOptionItems(countries)}
            </select>
          </div>

          <div className="form-group">
            <label htmlFor="city">City</label>
            <select
              className="custom-select"
              id="city"
              value={this.state.city}
              name="city"
              onChange={this.onChange}
            >
            {Object.values(cities).filter(key => key["country"] === **what condition to write here?**).map(city =>
              <option key={city.id} value={city.id}>
              {city.name}
              </option>
            )}

Answer 1

帮助我的是将 parseInt 放在条件中，因为 this.state.country 被保存为“1”、“2”、“3”。这就是问题所在。