Reactjs 反应选择意外的异步行为

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

---

那么，当服务器正确返回数据时，为什么没有显示任何内容呢？

默认情况下，react select会执行一些客户端筛选。因此，即使API返回值，react select也会将其过滤掉。可以找到它使用的默认筛选器实现。您可以看到正在Select.js中调用filterOptions属性，Async利用了该属性

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

---

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

太好了！我通过添加

filterOptions={options=>options}

作为异步道具的一部分来实现它。

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