-
질문 & 답변
카테고리
-
세부 분야
모바일 앱 개발
-
해결 여부
미해결
api 호출관련 질문해도 될까요?
21.09.06 00:05 작성 조회수 77
0
여러 탭을 구성하고, 회원 탭을 선택했을때
아래처럼 api 를 통해 데이터를 가져오고자 합니다.
api 를 호출하는 시점에 (call axios) 로그를 찍고
실제 가져온 데이터의 내용을 로그로 찍었는데요
call axios 로그는 한번만 출력됐고, 실제 서버 로그도 한번만 나왔는데
데이터로그의 내용이 총 3번 출력이 됩니다.
1. null
2. api 리턴 데이터
3. 2번과 동일한 api 리턴 데이터
혹시 왜 데이터로그가 3번이나 출력되는지 알 수 있을까요?
let members: IMember[] = []
const urlGetMemberList = 'http://localhost:8080/member/getStudentList'
export const MemberList = ({navigation}) => {
const [datas, setDatas] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useFocusEffect(React.useCallback(() => {
const fetchDatas = async () => {
try {
setError(null);
setDatas(null);
setLoading(true);
console.log("call axios")
const response = await axios.get(urlGetMemberList);
setDatas(response.data);
} catch (e: any) {
setError(e);
}
setLoading(false);
};
fetchDatas();
}, []))
console.log(datas)
if(datas != null) {
members = []
console.log(datas.responseBody.length)
for(let idx = 0; idx < datas.responseBody.length; idx++) {
members.push(new Member(idx, datas.responseBody.name, datas.responseBody.phone, datas.responseBody.startDate, datas.responseBody.remainCount))
}
}
const renderItem = (item: IMember) => {
return (
<TouchableOpacity
onPress={() => {
Alert.alert(item.name)
navigation.navigate('borderScreen')
}}
>
<RenderMember member={item} />
</TouchableOpacity>
)
}
return (
<SafeAreaView>
<FlatList data={members}
renderItem={({item}) => renderItem(item)}
keyExtractor={(item, index) => item.id.toString()}
ItemSeparatorComponent={() => <View style={[styles.itemSeprator]} />}
/>
</SafeAreaView>
)
}
답변을 작성해보세요.
답변 0