미해결
React Native with Expo: 제로초에게 제대로 배우기
onEndReached 함수가 바로 호출 되지 않는 이슈
onEndReached()가 바로 호출 되지 않습니다.생각 해보면.. 이 함수는 스크롤이 됐을 때만 호출 해야 맞지 않나요..? following쪽도 useEffect 쪽을 삭제 하고 나서는 데이터를 바로 불러 오지 못하는데.. "useEffect 제거 후 onEndreached()가 바로 실행된다." 이 부분 이해가 잘 안돼서 설명 부탁드리기 전에 한번 찾아봤습니다.대략 왜 바로 실행 된다고 하셨는지는 이해가 되긴 했는데, 저같은 경우는 좀 예외인 것 같아서 질문 남깁니다!지금 제 flash-list 버전은 아래와 같습니다!"@shopify/flash-list": "2.0.2",알아보니 v2에서는 estimatedItemSize를 제공하지 않고.. 해당 설정이 없어서 저같은 경우 onEndReached()가 바로 실행 되지 않았던 것 같습니다. 의존 된 데이터도 빈배열로 정의 돼있으니 더 아무 것도 실행 하지 않았던 것 같습니다.이런 경우 초기엔 useEffect로 직접 불러오나요?혹시 위에 버전 이슈 말고 제가 놓친 부분이 있다면 말씀 부탁드리겠습니다..!(home)/index.tsximport {
Text,
View,
TouchableOpacity,
StyleSheet,
useColorScheme,
ScrollView,
} from "react-native";
import { usePathname } from "expo-router";
import { useState, useCallback } from "react";
import Post, { Post as PostType } from "../../../components/Post";
import { FlashList } from "@shopify/flash-list";
export default function Index() {
const colorScheme = useColorScheme();
const path = usePathname();
const [posts, setPosts] = useState<PostType[]>([]);
const onEndReached = useCallback(() => {
console.log("posts1", posts.length);
const lastId = posts.at(-1)?.id;
if (!lastId) return;
fetch(`/posts?cursor=${lastId}`)
.then((res) => res.json())
.then((data) => {
if (data.posts.length > 0) {
setPosts((prev) => [...prev, ...data.posts]);
}
})
.catch(console.error);
}, [posts, path]);
return (
<View
style={[
styles.container,
colorScheme === "dark" ? styles.containerDark : styles.containerLight,
]}
>
<FlashList
data={posts}
renderItem={({ item }) => <Post item={item} />}
onEndReached={onEndReached}
onEndReachedThreshold={2}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
containerLight: {
backgroundColor: "white",
},
containerDark: {
backgroundColor: "#101010",
},
textLight: {
color: "black",
},
textDark: {
color: "white",
},
});