在 React Hooks 中输入文本时，antd Select Option 不呈现答案

【问题标题】：antd Select Option not rendering when entering text in React Hooks在 React Hooks 中输入文本时，antd Select Option 不呈现
【发布时间】：2021-02-26 03:42:54
【问题描述】：

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

我有这些状态：

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

还有这个组件：

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

这是我的句柄搜索功能：

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));
};

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

【问题讨论】：

你能在handleSearch函数的if (value) {前面加上一个console.log，看看你在方框里写的时候value是否不为空？
@ggirodda 感谢您的建议，但我刚刚尝试过，输入时值不为空

标签： reactjs typescript react-hooks antd

【解决方案1】：

原来filterOption={false} 需要添加到Select 组件中，即以下实际工作：

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

filterOption 的默认值设置为true。

【讨论】：

这拯救了我的一天！