React-tags: مثال على الإكمال التلقائي من جانب الخادم؟

لحسن الحظ ، فعلت هذا منذ بضعة أيام 😄: https://github.com/i-like-robots/react-tags/compare/v5.13.0...async-fetch-example

ياي !، فقط أبحث عن هذا!

مثال مع محاور وخطافات:

  //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])

تبقى بقية الكود كما هي في @ i-like-robots PR

شكرًا على المثال ، يبدو أن هناك مشكلة صغيرة في @ i-like-robots.
يتم تحديث قائمة الخيارات مباشرة بعد المعالج المخصص onInput https://github.com/i-like-robots/react-tags/blob/6.0/lib/ReactTags.js#L130.
ومع ذلك ، عندما أستعلم عن الخادم داخل معالج onInput فإنه يستغرق بعض الوقت.
نتيجةً لذلك ، تحتوي قائمة الخيارات دائمًا على قائمة اقتراحات من المكالمة السابقة ، وليس الأخيرة.