問題タブ [react-native-sectionlist]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
react-native - React Native SectionList は同じデータを複数回再レンダリングします
それが私のせいなのか、それとも正しい動作なのか判断できない問題に直面しています。
次のような構造を持つ React Native の SectionList コンポーネントを使用して、いくつかのデータをレンダリングしています。
次に、すべてを処理するコンポーネントは次のとおりです。
私が気付いたことは、1console.log回のレンダリングで同じアイテムに対して s が複数回取得されることです。keyExtractor メソッドに console.log を配置しましたが、どのレンダリング方法 (renderItemまたはrenderSectionHeader) を使用しても同じ状況を再現できます。
クラス (CategoriesAndSubcategories) コンポーネントのレンダリング メソッドは、レンダリング メソッドの先頭にある console.log で証明されているように、1 回だけトリガーされます。
ただし、コンソールで取得しているログを見てください。
私はあなたなどをからかおうとしているわけではありません。これらは、このコンポーネントの最初で唯一のレンダリングで取得した正確なログです。SectionList の各項目は、SectionList のレンダリングが停止する前に 10 回以上再レンダリングされます。配列内のデータが更新されないレンダリングCATEGORIES中、外側のコンテナでレイアウトの変更は発生せず、SectionList の UI でスクロールも発生しません。また、ログで確認できるように、アイテムは「ランダムに」再レンダリングされているようです。アイテムはkey extractor {"id":40,"name":"LABEL C:3 S:40"}38 回連続して表示されます (ログ リストの約 70%)。途中で、最初からやり直します。
このコードで非常に多くの再レンダリングが発生する理由を知っている人はいますか? 私は何か間違ったことをしていますか？
ps Expo SDK36、React 16.9、React Native 0.61.4、React Navigation 5 (現時点では 5.0.5) を使用しています。動作は、iOS (10+) と Android (9) で同じです。