React-window: 高さと上部の奇妙な問題

作成日 2019年07月03日 · 3コメント · ソース: bvaughn/react-window

概要

私は現在取り組んでいるクローズドソースプロジェクトを持っていますが、今日、入力を介してフィルタリングされるアイテムの巨大なリストにreact-windowを使用するという問題に遭遇しました。リストをフィルタリングすると、リストのレンダリング方法に問題が発生することがあります。特定のコンポーネントに間違った高さが使用されている場合があります。

高さを（スタイルを拡張して）希望の高さに強制すると、上部のオフセットが正しくなくなり、場合によってはアイテムのオーバーラップやギャップが作成されます。私が取り組んでいるプロジェクトでも、これとまったく同じ動作が発生していることがわかりました。以下のデモのように、「たまに」しか発生しないようです。これはフィルタリングに反応して起こるので、私はそれが何らかの形で関連していると思います。

今、私はこれを意図しない方法で使用している可能性があります。あるいは、おそらく私は愚かなことをしていて、正確に親指を置くことができません。しかし、これは人気のあるユースケースであり、ここの人々は最善の進め方を知っているかもしれないと思います。これが既存の問題である場合、または他の場所でこれについて質問する必要があると思われる場合は、お知らせください。ありがとうございます。

デモ

私が見ている問題を再現するために、私はそれの小さなデモを作成しようと決心しました。デモアプリを見るにはここをクリックしてください。 topの問題を確認したい場合は、style属性をオーバーライドして、高さをROW_HEIGHTまたはGROUP_HEADER_HEIGHT強制する必要があります。

ステップ

デモにアクセス
ボタンを押すRemove Bananas
「リンゴ」の拡大された見出しを参照してください

ノート

さまざまなボタンをクリックして問題を引き起こす他の方法もありますが、最も簡単で信頼性の高い方法であることがわかりました。
リストを非表示にして表示すると、問題が解決するようです。

テスト済みのブラウザ

Firefoxバージョン67.0.4（64ビット）
Chromeバージョン75.0.3770.100（公式ビルド）（64ビット）

💬 question

ソース

vinnymac

全てのコメント3件

ドキュメントをチェックアウト：
https://react-window.now.sh/#/api/VariableSizeList

resetAfterIndex(index: number, shouldForceUpdate: boolean = true): void
VariableSizeListは、パフォーマンスの目的で、各インデックスのオフセットと測定値をキャッシュします。このメソッドは、指定されたインデックスの後（およびそれを含む）のすべてのアイテムのキャッシュデータをクリアします。アイテムのサイズが変更されるたびに呼び出す必要があります。（これは典型的な出来事ではないことに注意してください。）
デフォルトでは、インデックスがリセットされた後、リストは自動的に再レンダリングされます。親コンポーネントで状態の更新が完了するまでこの再レンダリングを遅らせたい場合は、2番目のオプションのパラメーターにfalseの値を指定します。

キャッシュされたサイズの1つが変更されたことを通知するために、そのメソッドを呼び出していないようです。

＃273、＃199、＃147、＃57の複製のように聞こえます

bvaughn 2019年07月03日

👍1

@bvaughn支援に感謝します、私はそれを大いに感謝します。この問題の問題を検索したところ、残念ながらこれらのいずれにも遭遇することはありませんでした。

おそらく何らかの警告として、このケースをより目立たせるためにドキュメントを更新した場合、（あなたの正気のために）有利かもしれませんか？ドキュメントは、人がそれを何に使用するかについてのユースケースを与えるのではなく、メソッドが存在する理由を正当化することから始まります。

代わりにThis method should be called whenever the source items change.ようなもので開始すると役立つ場合があります。私がそれを助けることができれば、将来あなたにもっとスパムを送るのを避けるために何か👍

vinnymac 2019年07月03日

もちろん問題ありません。

水で、2019年7月3日、4：34 PMヴィンセントタベルナ[email protected]
書きました：

@bvaughn https://github.com/bvaughn支援に感謝し
よろしくお願いします。この問題の問題を検索するのは終わりではありませんでした
残念ながら、これらのいずれかに出くわします。
ドキュメントを更新して作成すると、（正気のために）有利になる可能性があります
このケースは、おそらく何らかの警告として、より顕著ですか？ドキュメントが始まります
のユースケースを与える代わりに、メソッドが存在する理由を正当化することでオフ
人がそれを何のために使うか。
代わりに、このメソッドのようなもので開始する必要があります
ソースアイテムが変更されるたび。助けることができます。スパムを避けるために何か
私がそれを助けることができれば将来もっとあなたに👍
—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/bvaughn/react-window/issues/280?email_source=notifications&email_token=AAAHHHKEU5Z2UVRSOMCN5L3P5UEMFA5CNFSM4H5HW4P2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVX
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AAAHHHK5ZANLKNLER475T33P5UEMFANCNFSM4H5HW4PQ
。

bvaughn 2019年07月03日

🎉1

このページは役に立ちましたか？

0 / 5 - 0 評価

React-window: 高さと上部の奇妙な問題

概要

デモ

テスト済みのブラウザ

全てのコメント3件

関連する問題