typescript - Hur använder man asynkron datakälla för blueprintjs Select-komponent?
Det officiella sättet att filtrera objekt är itemListPredicate-händelsehanteraren. Den är dokumenterad här:
https://blueprintjs.com/docs/#select/select-component.querying
Problemet är att itemListPredicate har denna signatur:
export declare type ItemListPredicate<T> = (query: string, items: T[]) => T[];
Som du kan se förväntar det sig att filtrera bort vissa objekt från en fast lista med redan befintliga objekt på en gång. Detta kan inte användas för stora datamängder. Jag behöver skicka frågan till servern, vänta på svaret och sedan returnera de (möjligen nya) objekten. Men detta kan inte göras med ovanstående hanterare eftersom den inte är asynkron.
Jag har försökt göra en lösning:
- spara den ändrade frågan i lokalt tillstånd när itemListPredicate anropas
- skicka frågan till servern från en neddämpad asynkron metod och vänta på svaret
- ändra
items-egenskapen förSelect-komponenten efter att servern har skickat tillbaka svaret
Men detta fungerar inte heller. Att ändra items-egenskapen stänger automatiskt Popover, så detta kan inte användas för live-sökning.
Jag skulle också kunna använda en annan komponent för detta (till exempel React-Select) men jag skulle vilja använda en lösning med blueprintjs Select - bara för att det är en del av blueprintjs-biblioteket och integreras med det sömlöst. (Till exempel storlekar, teman, ikoner, intentioner etc.)
Hur gör man detta korrekt?
UPPDATERING: Jag upptäckte att jag hade fel. Att sätta items-propen stänger inte Popovern. Jag råkade sätta något annat som orsakade att hela Select-komponenten renderades om. Så min idé FUNGERAR. Jag kommer inte att ta bort detta inlägg eftersom någon annan kan behöva det. Jag kommer att posta hela lösningen lite senare (efter testning).