在 React Hooks 中输入文本时 antd Select Option 不渲染

Question

antd我正在尝试使用和来实现带有远程数据Select的搜索框Option。我期望当我在搜索框中输入文本时，将立即呈现选项列表。相反，这些选项仅在我清除搜索框后才会出现。

我有这些状态：

const [symbol, setSymbol] = useState("");
const [searchResults, setSearchResults] = useState<React.ReactNode[]>();

和这个组件：

<Select
  showSearch
  value={symbol}
  onSearch={handleSearch}
  onChange={handleChange}
>
  {searchResults}
</Select>

这是我的handleSearch 函数：

const handleSearch = (value: string) => {
  if (value) {
    fetchStocksList(value, (data) => setSearchResults(data));
  }
};

这是用于从 api 获取数据的函数，下面console.log()可以正确记录我想要的数据：

const fetchStocksList = (
  value: string,
  callback: (data: React.ReactNode[]) => void
) => {
  axios
    .get(`${API_SERVER}/api/stocksinfo?search=${value}`)
    .then((res) => {
      let data: React.ReactNode[] = [];
      res.data.forEach((row: any) => {
        data.push(
          <Option value={row.symbol}>{row.symbol + ": " + row.name}</Option>
        );
      });
      return data;
    })
    .then((data) => {
      console.log(data);
      callback(data);
    })
    .catch((err) => console.error(err));
};

请问为什么只有在清除搜索框中输入的文本后才会出现选项？

Answer 1

事实证明filterOption={false}需要添加到Select组件中，即以下内容实际上有效：

<Select
  showSearch
  value={symbol}
  onSearch={handleSearch}
  onChange={handleChange}
  filterOption={false}
>
  {searchResults}
</Select>

的默认值filterOption设置为true。