在回调上的PrimeReact自动完成中触发completeMethod

问题描述

我正在使用primereact的自动完成组件。挑战在于，我不想在组件加载时将options数组设置为状态。但是相反，当用户键入前三个字母时，我会触发一个api调用，然后将响应设置为options数组（这是因为否则该数组可能很大，并且我不想膨胀状态内存）。 / p>

const OriginAutocomplete = () => {

    const [origins,setOrigins] = useState([]);
    const [selectedOrigin,setSelectedOrigin] = useState(null);
    const [filteredOrigins,setFilteredOrigins] = useState([]);

    useEffect(() => {
        if (!selectedOrigin || selectedOrigin.length < 3) {
            setOrigins([]);
        }
        if (selectedOrigin && selectedOrigin.length === 3) {
            getOrigins(selectedOrigin).then(origins => {
                setOrigins([...origins]);
            });
        }
    },[selectedOrigin,setOrigins]);

    const handleSelect = (e) => {
        //update store
    }

    const searchOrigin = (e) => {
        //filter logic based on e.query
    }

    return (
        <>
            <AutoComplete
                value={selectedOrigin}
                suggestions={ filteredOrigins }
                completeMethod={searchOrigin}
                field='code'
                onChange={(e) => { setSelectedOrigin(e.value) }}
                onSelect={(e) => { handleSelect(e) }}
                className={'form-control'}
                placeholder={'Origin'}
            />
        </>
    )
}

现在的问题是，当我键入3个字母时会触发呼叫，但是仅当我键入4个字母时才会列出选项。没关系，实际上我尝试更改代码以在键入2个字母时触发该呼叫；但是只有当我在api调用完成后键入第3个字母（即我键入2个字母，等待调用完成，然后键入第3个字母）时，此方法才能按预期工作。

如何更改选项数组时显示的选项？

我尝试在回调中设置filteredOrigins


            getOrigins(selectedOrigin).then(origins => {
                setOrigins([...origins]);
                setFilteredOrigins([...origins])
            });

但是它似乎似乎不起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

primereact reactjs reactjs