VirtualizedSectionList passes incorrect leading/trailingItem to ItemSeparatorComponent
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 76/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- javascript, react-native
- 領域
- mobile
調査の方向性
packages/virtualized-lists/Lists/tests/VirtualizedSectionList-test.js の ItemWithSeparator と失敗しているテストから始めます。そのテストを実行して、古いセパレーター props を再現します。リストが別のリージョンをレンダーした後、テストがパスし、ItemSeparatorComponent が現在の leadingItem と trailingItem を受け取れば完了です。
索引モデルが issue の本文から書いたものです。
説明
Description
Our app has a <SectionList> which was intermittently rendering ItemSeparatorComponents with wildly incorrect leadingItem/trailingItem props, including undefined, which as far as I can tell should never happen.
(While I’m here, I would also like to complain that the type definition for this prop is React.ComponentType<any> so I also spent a bit of time trying to work out if undefined was even an expected value.)
After investigation, it turns out that ItemWithSeparator keeps these values in state, so when the same cell happens to re-render with new props (for example when the virtualized list renders a different region), the separator keeps the previous leadingItem/trailingItem, which can be undefined if that previous row was at a section boundary.
Steps to reproduce
Have a <SectionList ItemSeparatorComponent={...}>, scroll around a bit, and observe the component is getting the wrong items.
Or, I have created a convenient failing unit test here: https://github.com/facebook/react-native/pull/55707
React Native Version
0.84.0
Affected Platforms
Runtime - Android, Runtime - iOS, Runtime - Web, Runtime - Desktop
Output of npx @react-native-community/cli info
~/src/vend/react-native$ npx @react-native-community/cli info
info Fetching system and libraries information...
System:
OS: macOS 15.7.4
CPU: (8) arm64 Apple M3
Memory: 133.81 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.19.5
path: ~/.asdf/installs/nodejs/20.19.5/bin/node
Yarn:
version: 1.22.22
path: ~/.asdf/installs/nodejs/20.19.5/bin/yarn
npm:
version: 10.8.2
path: ~/.asdf/plugins/nodejs/shims/npm
Watchman:
version: 2025.09.08.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/wolf/.asdf/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.1
- iOS 26.1
- macOS 26.1
- tvOS 26.1
- visionOS 26.1
- watchOS 26.1
Android SDK: Not Found
IDEs:
Android Studio: 2025.2 AI-252.25557.131.2521.14432022
Xcode:
version: 26.1.1/17B100
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.16
path: /usr/bin/javac
Ruby:
version: 2.7.6
path: /Users/wolf/.asdf/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 19.1.0
wanted: 19.2.3
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
● VirtualizedSectionList › syncs ItemWithSeparator separator props when list re-renders with new leadingItem/trailingItem
expect(received).toEqual(expected) // deep equality
Expected: ArrayContaining [{"leadingItem": "b", "trailingItem": "a"}]
Received: [{"leadingItem": "b", "trailingItem": "c"}, {"leadingItem": "a", "trailingItem": "b"}]
254 | // state from when "b" was at index 1 (leadingItem: a, trailingItem: c), so
255 | // the separator receives stale props and this assertion fails.
> 256 | expect(separatorPropsReceived).toEqual(
| ^
257 | expect.arrayContaining([
258 | {leadingItem: 'b', trailingItem: 'a'},
259 | ]),
at Object.toEqual (packages/virtualized-lists/Lists/__tests__/VirtualizedSectionList-test.js:256:36)
at asyncGeneratorStep (packages/virtualized-lists/Lists/__tests__/VirtualizedSectionList-test.js:15:37)
at asyncGeneratorStep (packages/virtualized-lists/Lists/__tests__/VirtualizedSectionList-test.js:15:37)
MANDATORY Reproducer
https://github.com/facebook/react-native/pull/55707
(This includes both a failing unit test for the underlying problem and an RNTester Playground reproducer with SectionList as an example.)
Screenshots and Videos
N/A
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react/react-native のほかの issue
-
Needs: Triage :mag:
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
react/react-native#58565 · コメント 1 件 · リアクション 2 件 ·
-
Needs: Author Feedback Needs: Repro
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
react/react-native#58555 · コメント 4 件 · リアクション 1 件 ·
-
Needs: Attention Needs: Repro
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
react/react-native#58526 · コメント 2 件 ·
-
Needs: Author Feedback Needs: Repro
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
react/react-native#58448 · コメント 1 件 ·
-
Needs: Attention Needs: Repro
難易度 2/5 半日 初心者へのやさしさ 82/100
react/react-native#58441 · コメント 2 件 ·
react/react-native の issue をすべて見る
似ている issue
-
Website Doc Typo オープン
難易度 1/5 1時間未満 初心者へのやさしさ 92/100
-
難易度 1/5 1〜3時間 初心者へのやさしさ 92/100
autowarefoundation/autoware_universe#13413 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
-
automated-analysis bug memory-safety
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100