React-tags: 업데이트 제안 소품은 다음 입력(v6)까지 옵션 목록을 업데이트하지 않습니다.

@yrik님 , 데이터 가져오기는 구성 요소에서 제공하는 것이 아니라 직접 구현합니다. 개별 구현을 디버그할 수는 없지만 몇 가지 조언을 제공하게 되어 기쁩니다.

#205의 예에 이어 표시해야 할 것보다 더 많은 제안을 가져오는 것이 좋습니다. 예를 들어 현재 6개의 제안을 표시하고 있다면 서버에서 12 또는 15를 가져와 보십시오. 이런 식으로 suggestionsFilter 에는 새 데이터가 수신될 때까지 사용할 관련 데이터가 남아 있어야 합니다.

돌아와주셔서 감사합니다!
조금 다른 문제입니다.
" 맥주 "라는 단어에 대한 자동 완성이 있다고 상상해보십시오.

1. 제안 목록이 비어 있습니다( [] )
2. 사용자 유형 " be " --> 서버가 [bee, beard, beetroot, beer]를 반환합니다(getOptions 호출 후 서버가 데이터를 반환하므로 옵션 목록이 업데이트되지 않기 때문에 아무 것도 표시되지 않음)
3. 사용자 유형 " bee " --> 서버는 [beet, beetroot, beer]를 반환합니다. 우리는 [beard, beard, beetroot, beer]를 표시합니다. 새로운 데이터가 아닌 이전에 업데이트된 데이터를 표시합니다.
4. 사용자 유형 " beer " --> 서버가 [beer]를 반환하고 [bee, beetroot, beer]를 표시하고 새로운 데이터가 아닌 이전에 업데이트된 데이터를 표시합니다.

onInput 가 async 이면 작동합니다. 또는 사용자 정의 onInput 에서 const options = getOptions.call(this, query) 를 호출하는 방법이 있는 경우에도 작동합니다.

알겠습니다. 따라서 현재 쿼리와 일치하지 않는 제안이 표시될 수 있습니다. 이것이 맞습니까?

이 예제 코드로 문제를 재현해 보겠습니다.

알겠습니다. 따라서 현재 쿼리와 일치하지 않는 제안이 표시될 수 있습니다. 이것이 맞습니까?

정확히! 제 경우에는 거의 항상 이전 쿼리의 결과를 보여줍니다. 응답이 브라우저에 캐시되어 즉시 반환되는 경우는 제외합니다.

jsfiddle을 사용하여 다시 만들려고했지만 lib를 제대로 연결하지 못했습니다.
jsfiddle에 이 플러그인의 기본 예제가 있는 경우 서버 측 자동 완성 예제로 확장할 수 있습니다.

또한 내가 v6을 사용하고 있으며 귀하가 가지고 있는 예제는 이전 버전과 비슷하다는 점에 주목할 가치가 있습니다.
"반응 태그 자동 완성": "6.0.0-베타.5"

나는 이 문제가 최근 및 향후 버전의 React의 변경으로 인해 componentWillReceiveProps() 를 피하려는 바람으로 v6에 도입되었다고 생각합니다. 새 버전에서는 제안 소품 변경을 설명하지 않는 마운트 및 onInput 에서만 업데이트되도록 제안을 리팩토링했습니다.

getDerivedStateFromProps() 를 사용하여 해결할 수 있지만 이 접근 방식은 불필요한 렌더링을 방지하기 위해 약간의 최적화가 필요하다고 생각합니다.

  static getDerivedStateFromProps (props, state) {
    const options = getOptions(props, state)
    return { options }
  }

나는 이것에 대해 몇 분을 보냈고 적절한 솔루션을 생각해 냈다고 생각합니다. 아래 애니메이션은 제안 소품이 비동기식으로 업데이트되고 옵션 목록이 다른 입력 없이 업데이트되는 것을 보여줍니다.

변경 사항은 매우 간단하므로 좀 더 테스트하고 PR을 올릴 것입니다.

useEffect 옵션 변경을 모니터링할 수 있으므로 이를 잘 처리해야 한다고 생각합니다.

useEffect(() => {
  setOptions(getOptions(props, state))
}, [options]);

이 문제를 해결해야 하는 v6.0.0-beta.6 를 출시했습니다.