0

我正在使用 primereact 的自动完成组件。挑战在于我不想将选项数组设置为组件加载时的状态；但是当用户输入前 3 个字母时，我会触发 api 调用，然后将响应设置为选项数组（这是因为否则数组可能很大，我不想膨胀状态内存）。

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 个字母。

How do I make the options to be displayed when the options array has changed?

我尝试在回调中设置filteredOrigins


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

但它显然似乎不起作用。

4

1 回答 1

0

弄清楚了。发布答案以防有人思考同样的问题。我将里面的代码useEffect移到了searchOrigin函数中。

所以 searchOrigin 函数如下所示：

    const searchOrigin = (e) => {
        const selectedOrigin = e.query;
        
        if (!selectedOrigin || selectedOrigin.length === 2) {
                     setOrigins([]);
                     setFilteredOrigins([]);
        }
        
        if (selectedOrigin && selectedOrigin.length === 3) {
            getOrigins(selectedOrigin).then(origins => {
                setOrigins([...origins]);
                setFilteredOrigins(origins);
            });
        }       

        if (selectedOrigin && selectedOrigin.length > 3) {
                const filteredOrigins = (origins && origins.length) ? origins.filter((origin) => {
                    return origin.code
                        .toLowerCase()
                        .startsWith(e.query.toLowerCase()) || 
                        origin.name
                        .toLowerCase()
                        .startsWith(e.query.toLowerCase())  ||
                        origin.city
                        .toLowerCase()
                        .startsWith(e.query.toLowerCase())
              }) : [];
              setFilteredOrigins(filteredOrigins);
        }
    }
于 2020-10-06T15:35:15.783 回答