react / react/react-native

Adding onViewableItemsChanged to SectionList changes the items passed to each section's keyExtractor

Abierto
#46,588 2 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: SectionList Issue: Author Provided Repro
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

Description

We wrote a SectionList component where each section defines it's own keyExtractor. One of the sections uses a key from a nested object in each item in the section. It broke when we wanted to add visibility tracking to the section list, and it seems like the section objects are being run through the keyExtractor but only when onViewableItemsChanged prop is provided.

I expect that only items within each section should be run through the section's keyExtractor function, and that the behavior is consistent regardless of what props are provided.

Steps to reproduce
  1. Open expo snack linked below
  2. Run it on android or iOS device and observe it works
  3. Uncomment the onViewableItemsChanged line from the SectionList and observe the break
React Native Version

0.75.3

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info
See expo snack for reproduction
Stacktrace or Logs
Cannot read property 'id' of undefined
Reproducer

https://snack.expo.dev/V1Ad0VTld860Zdt8n-qb7

Screenshots and Videos
Screenshot 2024-09-20 at 5 07 04 PM

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

Empieza con el Expo Snack enlazado y reproduce el fallo en Android o iOS alternando la prop onViewableItemsChanged de SectionList. Sigue cómo el seguimiento de visibilidad invoca a section keyExtractor y verifica que se le pasen de forma consistente únicamente los elementos dentro de cada sección, con o sin esa prop.

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

Evaluación

Stack tecnológico
react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.