Question

react-select组件存在意外行为。

我已将其设置为加载外部json以填充列表。

<Select.Async
    name="cf_search"
    value=""
    autoload={false}
    cache={false}
    ignoreAccents={false}
    loadOptions={this.handleCFSearch}
    onChange={this.handleSelectCFName}
/>

handleCFSearch = (input) => {
    let term = encodeURIComponent(input);

    return fetch(`${AppGlobal.baseBackend}/PersAddo/autocompleteSearch/${term}.json`)
        .then((response) => {
            if(response.ok) {
                return response.json();
            }
            throw new Error('Network response was not ok.');
        }).then((json) => {
            console.log(json);
            let values = json.result.map((element) => {
                return {
                    value: element.pers_id,
                    label: element.first_name + ' ' + element.last_name
                }
            });
            return { options: values };
        });
}

服务器脚本处理搜索词并返回名称为JSON的数组。

它工作得很好但在某些情况下它不起作用。

如果我搜索'morten twe'，服务器的结果会显示在选择中。但是，如果我搜索'morte twe'（名字中只有一个字符），则列表不会显示，而选择框看起来不是结果。

我测试了两个搜索字词，它们都返回完全相同的JSON：

{
    "result": [
        {
            "pers_id": 123456,
            "first_name": "Morten",
            "last_name": "Twellmann"
        }
    ]
}

那么为什么服务器正确返回数据时没有出现任何内容？

Answer 1

react-select默认进行一些客户端过滤。因此，即使您的API返回值，react-select也会过滤掉它。可以找到它使用的默认过滤器实现here。您可以在Select.js中看到filterOptions prop被称为here，Async使用它。

默认过滤基本上只是检查子字符串，不区分大小写的相等性。如果未显示该值，则搜索和结果之间存在差异，因此会将其过滤掉。

您可以提供自己的filterOptions函数来覆盖默认值，或者只是传递undefined来完全关闭客户端过滤。

React-select意外的异步行为

1 个答案: