Javascript 语义ui react中的可搜索下拉列表不会立即显示从API检索到的选项的完整列表

当我试图调用API来填充语义UI的选项时，它首先显示部分选项，为了显示完整列表，我必须先单击下拉列表外部（模糊它），然后再单击内部

我已经在这上面呆了一段时间了，我真的想不出还有什么可以尝试的，有人知道它为什么会这样吗

代码如下：

import React, { Component } from 'react';
import { Dropdown } from 'semantic-ui-react';
import axios from 'axios';

let typingTimer;

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            creators: [],
            creatorsLoading: true,
            selectedCreator: null
        };
        this.searchCreators = this.searchCreators.bind(this);
        this.setCreatorsState = this.setCreatorsState.bind(this);
        this.changeCreator = this.changeCreator.bind(this);
    }

    componentDidMount() {
        this.searchCreators();
    }

    setCreatorsState(res) {
        this.setState({
            creators: res.data.map((user) => {
                return { text: `${user.name} (${user.country})`, value: user.id };
            }),
            creatorsLoading: false
        });
    }

    searchCreators(searchQuery) {
        if (searchQuery === '') {
            this.setState({ creatorsLoading: false });
            return null;
        }
        this.setState({ creatorsLoading: true });

        const args = {
            params: {
                'search_query: searchQuery.trim();
            }
        };

        axios
            .get(url, args)
            .then((res) => {
                if ('error' in res)
                    return this.setState({ creatorsLoading: false });
                else {
                    this.setCreatorsState(res.data);
                }
            })
            .catch((err) => this.setState({ creatorsLoading: false }));
    }

    delayExecute(text) {
        //Detect keystroke and only execute after the user has finish typing
        clearTimeout(typingTimer);
        typingTimer = setTimeout(() => {
            return this.searchCreators(text);
        }, 700);
        return true;
    }

    changeCreator(value) {
        if (value) this.setState({ selectedCreator: value });
        else this.setState({ selectedCreator: null });
    }

    render() {
        const {creators, creatorsLoading, selectedCreator} = this.state;
        return (
            <Dropdown
                selectOnBlur={false}
                loading={creatorsLoading || false}
                clearable
                onChange={(_, data) => this.changeUser(data.value)}
                onSearchChange={(_, data) => this.delayExecute(data.searchQuery)}
                placeholder="Creators"
                fluid
                selection
                search
                value={selectedCreator}
                options={creators}
            />
        );
    }
}

export default App;

import React，{Component}来自'React'；
从“语义ui反应”导入{Dropdown}；
从“axios”导入axios；
让打字计时器；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
创作者：[]，
创建者加载：正确，
selectedCreator:空
};
this.searchCreators=this.searchCreators.bind（this）；
this.setCreatorState=this.setCreatorState.bind（this）；
this.changeCreator=this.changeCreator.bind（this）；
}
componentDidMount（）{
这是searchCreators（）；
}
SetCreatorState（res）{
这是我的国家({
创建者：res.data.map（（用户）=>{
返回{text:`${user.name}（${user.country}）`，值：user.id}；
}),
创建者加载：false
});
}
searchCreators（searchQuery）{
如果（searchQuery==''）{
this.setState（{creatorsLoading:false}）；
返回null；
}
this.setState（{creatorsLoading:true}）；
常量args={
参数：{
'search_query:searchQuery.trim（）；
}
};
axios
.get（url，args）
。然后（（res）=>{
if（res中的“错误”）
返回此.setState（{creatorsLoading:false}）；
否则{
此.setCreatorState（res.data）；
}
})
.catch（（err）=>this.setState（{creatorsLoading:false}））；
}
延迟执行（文本）{
//检测击键并仅在用户完成键入后执行
clearTimeout（键入计时器）；
typingTimer=setTimeout（（）=>{
返回此。searchCreators（文本）；
}, 700);
返回true；
}
变更创建者（值）{
if（value）this.setState（{selectedCreator:value}）；
else这个.setState（{selectedCreator:null}）；
}
render（）{
const{creators，creatorsLoading，selectedCreator}=this.state；
返回(
this.changeUser（data.value）}
onSearchChange={（{，data）=>this.delayExecute（data.searchQuery）}
占位符=“创建者”
流体
选择
搜索
值={selectedCreator}
选项={creators}
/>
);
}
}
导出默认应用程序；

我终于找出了问题所在，因此，如果有人无意中发现类似的东西，这里就是：

Semantic UI的searchable下拉菜单默认情况下执行搜索，因此我将该searchQuery发送到API并根据该searchQuery检索一个用户数组，然后该下拉菜单在检索到的数组中对同一个searchQuery执行另一个搜索。因为我放在选项中的文本没有我在API中搜索的相同标准，所以我得到了不同的结果

this.setState({
    creators: res.data.map((user) => {
        return { text: `${user.name} (${user.country})`, value: user.id };
    }),
    creatorsLoading: false
});

由于我在下拉列表外单击时使用了

selectionblur={false}

，因此searchQuery清空，默认搜索没有执行，这就是为什么我在模糊后得到了正确的数组