Untungnya, saya melakukan ini beberapa hari yang lalu : https://github.com/i-like-robots/react-tags/compare/v5.13.0...async-fetch-example
yay!, hanya mencari ini!
contoh dengan aksio dan kait:
//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])
Kode lainnya tetap sama dengan PR @i-like-robots
Terima kasih untuk contohnya, sepertinya ada masalah kecil @i-like-robots.
Daftar opsi diperbarui langsung setelah penangan khusus onInput
https://github.com/i-like-robots/react-tags/blob/6.0/lib/ReactTags.js#L130.
Namun, ketika saya menanyakan server di dalam onInput
handler itu membutuhkan waktu.
Akibatnya, daftar opsi selalu berisi daftar saran dari panggilan sebelumnya, bukan yang terbaru.
Komentar yang paling membantu
Untungnya, saya melakukan ini beberapa hari yang lalu : https://github.com/i-like-robots/react-tags/compare/v5.13.0...async-fetch-example