React Native onEndReached FlatList trigger error
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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.
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Tái hiện chuỗi tải lần đầu bằng cách sử dụng FlatList, onEndReachedThreshold={0.2} và dữ liệu được điền bất đồng bộ từ issue. So sánh với trường hợp dữ liệu được lưu trong bộ nhớ đệm và cách giải quyết bằng conditional rendering, sau đó lần theo entry point của onEndReached. Được xem là hoàn tất khi một danh sách ban đầu trống không thực thi callback trước khi dữ liệu đến, trong khi việc chạm đến cuối danh sách sau đó vẫn kích hoạt callback.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript, react-native
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Sôi nổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 55/100