过滤选择下拉菜单在React中过滤？

import React, { Component } from 'react';

class FilterDropdownMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: ['option1', 'option2', 'option3', 'option4'],
      filteredOptions: [],
      filterValue: ''
    };
  }

  componentDidMount() {
    // 初始时展示所有选项
    this.setState({ filteredOptions: this.state.options });
  }

  componentDidUpdate(prevProps, prevState) {
    // 当过滤条件变化时更新过滤后的选项
    if (this.state.filterValue !== prevState.filterValue) {
      const filteredOptions = this.state.options.filter(option =>
        option.includes(this.state.filterValue)
      );
      this.setState({ filteredOptions });
    }
  }

  handleFilterChange = event => {
    // 更新过滤条件
    this.setState({ filterValue: event.target.value });
  };

  render() {
    return (
      <div>
        <select value={this.state.filterValue} onChange={this.handleFilterChange}>
          <option value="">All</option>
          {this.state.filteredOptions.map(option => (
            <option key={option} value={option}>
              {option}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

export default FilterDropdownMenu;