Javascript 如何处理处于多个状态的数据以过滤处于不同状态的数据

我试图用状态筛选表中的数据。我创建了两个状态，第一个用于存储下拉列表中的数据，第二个用于存储表中呈现的数据

例如

this.state {
   dropdown:[],
   tabledata:[]
}

我正在将来自两个不同rest端点的数据设置为这两种状态。第一个状态用于将数据绑定到下拉列表，第二个状态用于将数据绑定到表。当我从下拉列表中选择数据时，如何处理过滤器逻辑？根据所选数据，应在表中过滤相同的数据。

类似于以下内容：

constructor(props) {
    super(props);
    this.state = {
      dropdown: [],
      data: [],
      filteredData: [],
    }
  }
  onDropdownChange(e) {
    this.setState({
      filteredData: this.state.data.filter(() => // put your condition and return the data)
    })
  }
  render() {
    return (
      <div>
        <select onChange={this.onDropdownChange.bind(this)}>
          {
            this.state.dropdown.map((value) => <option value={value}>{value}</option>)
          }
        </select>
        <YourTable data={this.state.filteredData} />
      </div>
    )
  }

构造函数（道具）{
超级（道具）；
此.state={
下拉列表：[]，
数据：[]，
过滤器数据：[]，
}
}
onDropdownChange（e）{
这是我的国家({
filteredData:this.state.data.filter（（）=>//放入条件并返回数据）
})
}
render（）{
返回(
{
this.state.dropdown.map（（value）=>{value}）
}
)
}

能否在下拉列表和tabledata数组中添加其中一个数据项的结构。下拉列表：India USA添加更多代码和这些状态变量实际外观的结构示例。表数组：renderTableData（数据）{返回this.state.tabledata.map（（元素，i）=>（{element.Country}