React-select 意外的异步行为

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

服务器脚本处理搜索词和 returns 一个数组，其中的名称在 JSON。

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

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

我测试了两个搜索词，它们 return 完全相同 JSON:

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

那么，为什么当服务器 return 正确发送数据时没有显示任何内容？

Answer 1

react-select 默认做一些客户端过滤。因此，即使您的 API 正在返回值，react-select 也会将其过滤掉。它使用的默认过滤器实现可以在 Select.js 中找到 here . You can see the filterOptions prop being called here，Async 使用它。

默认过滤基本上只是检查子字符串，不区分大小写是否相等。在没有显示值的情况下，搜索和结果有差异，所以过滤掉。

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

React-select 意外的异步行为

React-select unexpected async behavior

reactjs

react-select

fetch-api