* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
5-9강의 에서 베너 자리에 빙글빙글 돌고 있읍니다.
어떤 이유인지 전혀 모르겠습니다..
보
고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
작성한 코드 및 에러 메세지
firebaseFunctions.jsx--------------------------------------------------
export async function getData(setNext, setData) {
try {
let data = [];
const db = firebase.firestore();
const first = db.collection('diary').orderBy('date', 'desc').limit(5);
const snapshot = await first.get();
const currentUser = firebase.auth().currentUser;
// snapshot.docs.map((doc) => {
// console.log('[페이지네이션 01]');
// data.push(doc.data());
// });
let last;
if (snapshot.docs.length !== 0) {
last = snapshot.docs[snapshot.docs.length - 1];
}
setNext(last.data().date);
let count = 0;
let limit = snapshot.docs.length;
snapshot.docs.map(async (doc) => {
console.log('[페이지네이션 01]');
let d = doc.data();
const like = await db
.collection('diary')
.doc(d.date + 'D')
.collection('likes')
.doc(currentUser.uid)
.get();
if (like.data() == undefined) {
d.like = false;
} else {
d.like = true;
}
let limit = snapshot.docs.length;
snapshot.docs.map(async (doc) => {
console.log('[페이지네이션 01]');
let d = doc.data();
const like = await db
.collection('diary')
.doc(d.date + 'D')
.collection('likes')
.doc(currentUser.uid)
.get();
if (like.data() == undefined) {
d.like = false;
} else {
d.like = true;
}
export async function getNextData(nextDate, setNext) {
try {
console.log('불러올 다음 date: ' + nextDate);
let data = [];
const db = firebase.firestore();
const next = db
.collection('diary')
.orderBy('date', 'desc')
.startAfter(nextDate)
.limit(5);
const snapshot = await next.get();
snapshot.docs.map((doc) => {
console.log('[페이지네이션 Next]');
doc.data();
data.push(doc.data());
});
let last;
if (snapshot.docs.length !== 0) {
last = snapshot.docs[snapshot.docs.length - 1];
setNext(last.data().date);
return data;
} else {
return 0;
}
} catch (err) {
console.log(err);
return false;
}
}
----------------------------------------------------------
MainPage.jsx --------------------------------------
export default function MainPage({ navigation }) {
const [data, setData] = useState([]);
const [next, setNext] = useState(0);
useEffect(() => {
navigation.addListener('beforeRemove', (e) => {
e.preventDefault();
});
getData(setNext, setData);
}, []);
console.log('게시글 마지막값:' + next);
return (
<Container>
<HeaderComponent />
{data.length == 0 ? (
<ActivityIndicator size="large" />
) : (
<FlatList
data={data}
ListHeaderComponent={() => {
return (
<Content style={{ marginTop: 30 }}>
<Animatable.View
animation="pulse"
easing="ease-out"
iterationCount={'infinite'}
direction="alternate"
>
<Grid style={styles.banner}>
<Col size={1} style={{ padding: 20 }}>
<Icon name="paper-plane" style={{ color: 'deeppink' }} />
</Col>
<Col size={6} style={{ padding: 15 }}>
<Text>이야기 하고 싶은 친구들에게</Text>
<Text style={{ fontWeight: '700' }}>
wegram을 전하세요
</Text>
</Col>
</Grid>
</Animatable.View>
<Grid style={{ padding: 20 }}>
<Text style={{ color: 'grey' }}>THE DIARY</Text>
</Grid>
</Content>
);
}}
onEndReachedThreshold={Platform.OS == 'ios' ? 0 : 0.3}
onEndReached={async () => {
console.log('바닥 가까이 감: 리프레시');
let nextData = await getNextData(next, setNext);
if (nextData == 0) {
Alert.alert('더이상 글이 없어요!');
} else {
let newData = [...data, ...nextData];
console.log('처음5개와 다음5개 newData변수로 넣는다');
await setData(newData);
}
}}
renderItem={(data) => {
// console.log(data);
return (
<CardComponent navigation={navigation} content={data.item} />
);
}}
numColumns={1}
keyExtractor={(item) => item.date.toString()}
/>
)}
</Container>
);
}발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
