react / react/react-native

React Native onEndReached FlatList trigger error

Abierto
#36,529 23 comentarios 4 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: FlatList Needs: Triage :mag: Newer Patch Available
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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.

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Reproduce la secuencia de la primera carga usando FlatList, onEndReachedThreshold={0.2} y datos poblados de forma asíncrona a partir del issue. Compárela con el caso de datos en caché y con la solución alternativa de renderizado condicional; después, rastree el punto de entrada de onEndReached. Se considera terminado cuando una lista inicialmente vacía no ejecuta el callback antes de que lleguen los datos, mientras que alcanzar el final posteriormente sigue activándolo.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react-native
Área
mobile
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Activo
Claridad
Bastante claro
Aptitud para principiantes
55/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.