Heureusement, je l'ai fait il y a quelques jours 😄 : https://github.com/i-like-robots/react-tags/compare/v5.13.0...async-fetch-example
ouais !, je cherche juste ça !
exemple avec axios et crochets :
//initial api call
const [{ data: labelsData }, doGetLabels] = useAxios({
url: '/labels',
})
const [suggestions, setSuggestions] = useState([])
const [busy, setBusy] = useState(false)
const handleInputChange = debounce((name) => {
if (!busy) {
setBusy(true)
doGetLabels({ params: { name } })
}
})
//getResponseData is my custom parser for the BE response
useEffect(() => {
const labels = labelsData ? getResponseData(labelsData).labels : []
if (setBusy) {
setBusy(false)
}
setSuggestions(labels)
}, [labelsData])
Le reste du code reste le même que le PR @i-like-robots
Merci pour l'exemple, il semble qu'il y ait un petit problème @i-like-robots.
La liste des options est mise à jour directement après le gestionnaire personnalisé onInput
https://github.com/i-like-robots/react-tags/blob/6.0/lib/ReactTags.js#L130.
Cependant, lorsque j'interroge le serveur à l'intérieur du gestionnaire onInput
cela prend un certain temps.
En conséquence, la liste des options contient toujours la liste des suggestions de l'appel précédent, pas le dernier.
Commentaire le plus utile
Heureusement, je l'ai fait il y a quelques jours 😄 : https://github.com/i-like-robots/react-tags/compare/v5.13.0...async-fetch-example