react / react/react-native

React Native onEndReached FlatList trigger error

Offen
#36,529 23 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: FlatList Needs: Triage :mag: Newer Patch Available
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

I'm developing a react native app using the version 0.71.3 and I'm having some problems with the extremely discussed onEndReached callback.

React Native Version

0.71.3

Output of npx react-native info

System:
OS: macOS 12.6.3
CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
Memory: 228.86 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.14.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.5.0 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.12.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 17.0.2 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Here's my onEndReached re-implementation to prevent the callback to be triggered even if the list is empty and to trigger it only once:

if (!endReached.current && dataSize > 0) {
  endReached.current = true;
  onEndReached?.();
}

And every time the data size changes, the endReached is set to false again:

useEffect(() => {
  endReached.current = false;
}, [dataSize]);

And then the list:

<FlatList onEndReachedThreshold={0.2} />

Now the problem arise when loading the list for the first time, the onEndReached callback is triggered even if the list is empty and once the list is populated, downloading items asynchronously, and reach the end the callback it's not triggered.

But if the list data area cached, the second time I load the list the onEndReached is not triggered at the beginning but on the right way.

It seems that the error, or I think the bug, arise when the list is empty because data are loading, indeed if I set a condition to render the list only after the data are fully loaded, the onEndReached is trigged correctly.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Reproduziere die Sequenz beim ersten Laden mit FlatList, onEndReachedThreshold={0.2} und asynchron aus dem Issue befüllten Daten. Vergleiche sie mit dem Fall mit gecachten Daten und der Umgehungslösung durch bedingtes Rendern, und verfolge anschließend den Einstiegspunkt von onEndReached. Als abgeschlossen gilt, dass eine anfänglich leere Liste den Callback nicht ausführt, bevor Daten eintreffen, während das Erreichen des Endes danach weiterhin den Callback auslöst.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.