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

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'。这是问题所在。