Javascript Antd选择搜索框不呈现匹配项

我有产品的数据，我使用搜索值过滤数据，然后使用过滤后的数据呈现选项。产品数据作为道具来自全球redux商店。出于某种原因，只有当搜索值为null时，当我开始键入时，Filteredata才会更新，组件也会重新呈现，但选项不显示数据，下拉列表才会显示数据

我已检查是否使用正确的Filteredata映射选项。即使重新渲染组件，这些选项似乎也不会渲染

请查看以下代码：

import React from 'react';
// import {useState} from 'react';
import {Select} from 'antd';
import {connect} from 'react-redux';
import {fetchProductsAsync} from 'common/actions/fetchData';

const {Option} = Select;

class SelectOptions extends React.Component {
  state = {
    filteredData: [],
    value: undefined,
  };

  componentDidMount() {
    const {fetchProductsAsync} = this.props;
    fetchProductsAsync();
    const {products} = this.props;
    this.setState({filteredData: products || []});
  }

  componentDidUpdate() {
    console.log(this.state.filteredData);
  }

  filterData = (value) => {
    const {products} = this.props;
    const filData = products.filter((prod) => {
      return prod.name.includes(value);
    });
    // console.log(filData);
    this.setState({filteredData: filData});
  };

  handleSearch = (value) => {
    const {products} = this.props;
    if (value) {
      // this.setState({value});
      this.filterData(value);
      // console.log('yes');
    } else {
      console.log('empty');
      this.setState({filteredData: products});
      this.forceUpdate();
    }
  };

  handleChange = (value) => {
    // console.log(value);
    this.setState({value});
  };
  render() {
    const {others} = this.props;
    // console.log(this.state.filteredData);
    const options = this.state.filteredData.map((item, index) => {
      console.log(item);
      return (
        <Option value={item.value || item[others.key] || item}>
          {others.customTitle ? (
            <text style={{fontSize: 13, fontWeight: 'bold'}}>{item[others.customTitle]}</text>
          ) : (
            item.label || item[others.key] || item
          )}
          {others.dataKeys ? (
            <div className="row" style={{flexWrap: 'wrap'}}>
              {others.dataKeys.map((i) => (
                <text style={{fontSize: 11, marginLeft: 5, marginRight: 5}}>{item[i]}</text>
              ))}
            </div>
          ) : null}
        </Option>
      );
    });
    return (
      <Select
        showSearch
        onSearch={this.handleSearch}
        // placeholder="Select"
        // key={this.state.filteredData.length}
        value={this.state.value}
        onChange={this.handleChange}>
        {options}
      </Select>
    );
  }
}

const mapStateToProps = (state) => {
  return {products: state.data.products || []};
};

export default connect(mapStateToProps, {fetchProductsAsync})(SelectOptions);

---

试着在选择组件过滤器选项={false}上设置这个道具

试着在选择组件过滤器选项={false}上设置这个道具

嘿，听着，你的向导，你救了我的命，我两天来一直在试着让它工作。请解释这样做的原因。我想知道我到底有多笨。你能帮我解决另一个问题吗？下拉菜单现在很好，但当选择该选项时，该值不会更新为该选项的值。谢谢。onChange函数已经启动并记录了正确的值，但是当我提交表单时，它说这个字段是必需的。简单的filterOption属性用于本地过滤，它接受布尔函数。如果我是你，我实际上会选择OnSearchByFilterOption，因为看起来你想通过onChange&Form submit来过滤Local。你能提供更多的代码吗？或者在这里问另一个问题Stack Overflow嘿，听着，你这个巫师，你救了我的命，我两天来一直在努力让它工作。请解释这样做的原因。我想知道我到底有多笨。你能帮我解决另一个问题吗？下拉菜单现在很好，但当选择该选项时，该值不会更新为该选项的值。谢谢。onChange函数已经启动并记录了正确的值，但是当我提交表单时，它说这个字段是必需的。简单的filterOption属性用于本地过滤，它接受布尔函数。如果我是你，我实际上会选择OnSearchByFilterOption，因为看起来你想通过onChange&Form submit来过滤Local。你能提供更多的代码吗？或者在这里问另一个问题