React-tags: 서버 측 자동 완성 예제?

운 좋게도 저는 며칠 전에 이것을 했습니다 😄: https://github.com/i-like-robots/react-tags/compare/v5.13.0...async-fetch-example

야!, 이것만 찾고 있어!

axios 및 후크의 예:

  //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 핸들러 내부에서 서버를 쿼리하면 시간이 걸립니다.
결과적으로 옵션 목록에는 항상 최근 호출이 아닌 이전 호출의 제안 목록이 포함됩니다.