javascript - 单击反应js中搜索字段中的搜索图标后，选项未填充到下拉列表中

Question

在这个文件下，我定义了我的组件，它使用 Async Select 来显示一个搜索框，如果您在其中通过键入搜索任何结果，将通过从 Web 服务获取这些结果成功地在下拉列表中显示这些结果，并且同样应该在那里发生是字段中的文本，然后单击搜索图标，结果应显示/填充在下拉列表中。这正在成功地发生。

import  { loadUsers } from '../path/services';
import React from 'react';
import AsyncSelect from 'react-select/async';
import { Components } from 'react-select';
import SearchIcon from "@material-ui/icons/Search"

const MyComponent(props) => {
    const {value, inputValue, onChange, rowData, onRowDataChange} = props;
    const [open, setOpen] = React.useState(false);

    const loadOptions = inputValue => {
        if(!inputValue)
            setOpen(false);
        else
            return loadUsers(inputValue, setOpen);
            /* this function makes an async api call and returns
            a promise which in turn successfully returns an array result.
            */
    }

    const handleOnBlur = () => {
        setOpen(false);
    }

    const handleSearchIcon = () => {
        return loadOptions(value);
        // the input value of search field coming in props
    }
    const IndicatorContainer = props => {
        return (
            <div style={{paddingInline: "8px"}}
                <components.IndicatorContainer {...props}>
                    <SearchIcon onClick={handleSearchIcon} />
                </components.IndicatorContainer>
            </div>
        )
    }

    return (
        <AsyncSelect
            cacheOptioons
            loadOptions={loadOptions}
            value={value.ownerName}
            inputValue={inputValue}
            defaultInputValue={value}
            components={{ IndicatorContainer }}
            closeMenuOnSelect={true}
            menuIsOpen={open}
            onBlur={handleOnBlur}
            onChange={(event => {
                onChange(even.label)
                onRowDataChange({
                    ...rowData,
                    ownerId: event && event.value ? event.Value : "",
                    ownerName: event && event.label ? event.label : ""
                })
            })}

    )
}
export default MyComponent;

我在不同 JavaScript 文件下的 Web 服务调用。

export const loadUsers = (inputText, setOpen) => {
// make api call using axios and return a promise object which in turn returns an array object
    return new Promise(resolve => {
        /*
             set url in a constant variable by name "url"
        
        */
        axios.get(url).then(response  => {
            let arrayObj = [];
            /* do some validations */
            // response.results is an array
            response.results.map(res => {
                arrayObj.push({value: res.value, label: res.label});
            })
            setOpen(true);
            resolve(arrayObj);
        })
    })
}

问题：仅在单击搜索图标时（输入文本出现在字段中），即使 Web 服务成功获取数据arrayObj并返回承诺，下拉菜单也会以“无选项”打开。即使 Web 服务调用发生并检索给定的inputText. 当我直接在字段中键入数据而不是单击搜索图标时，不会发生相同的情况。当我直接在搜索字段中输入（不单击搜索图标）时，从 Web 服务获取（调用每个按键）后，选项会在下拉列表中成功填充/显示。我看到一些帖子可以loadOptions通过在异步选择中使用一些关键道具再次触发，但我没有得到它，因为没有示例代码。不确定添加此密钥道具是否是一种解决方案。

标签： javascriptreactjsmaterial-uireact-selectreact-async