React-tags: 提案の更新propは、次の入力（v6）までオプションリストを更新しません

こんにちは@yrik 、データフェッチはコンポーネントによって提供されませんが、自分で実装します。 個々の実装をデバッグすることはできませんが、いくつかアドバイスを提供させていただきます。

＃205の例に続いて、表示する必要があるよりも多くの提案を取得することをお勧めします。 たとえば、現在6つの提案を表示している場合は、サーバーから12または15をフェッチしてみてください。 このように、 suggestionsFilterは、新しいデータが受信されるまで使用する関連データがいくつか残っているはずです。

戻ってきてくれてありがとう！
それは少し違う問題です。
「ビール」という単語のオートコンプリートがあると想像してみてください

1. 提案リストが空です（ [] ）
2. ユーザータイプ " be "->サーバーは[bee、beard、beetroot、beer]を返します（サーバーがgetOptions呼び出し後にデータを返すため、オプションリストが更新されないため、何も表示されません）
3. ユーザータイプ「 bee 」->サーバーは[bee、beetroot、beer]を返します[bee、beard、beetroot、beer]を表示します。新しいデータではなく、以前に更新されたデータを表示します
4. ユーザータイプ " beer "->サーバーは[beer]を返し、[bee、beetroot、beer]を表示し、新しいデータではなく、以前に更新されたデータを表示します

onInputがasync場合、機能します。 または、カスタムonInputからconst options = getOptions.call(this, query)を呼び出す方法がある場合は、それも機能します。

OK私は従うと思います-そのため、現在のクエリと一致しないはずの提案が表示される場合がありますが、これは正しいですか？

このサンプルコードで問題を再現してみ

OK私は従うと思います-そのため、現在のクエリと一致しないはずの提案が表示される場合がありますが、これは正しいですか？

丁度！ 私の場合、ほとんどの場合、前のクエリの結果が表示されます。 応答がブラウザにキャッシュされ、即座に返される場合を除きます。

jsfiddleを使用して再作成しようとしましたが、ライブラリを適切に接続できませんでした。
jsfiddleにこのプラグインの基本的な例がある場合は、サーバー側のオートコンプリートの例で拡張できます。

また、私がv6を使用していて、あなたが持っている例は前のバージョンのように見えることにも注意する価値があります。
"react-tag-autocomplete"： "6.0.0-beta.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をリリースしました。