프로그래밍/React Native
[React Native] promise.all에서 promise반환 오류
부단
2022. 6. 24. 21:26
728x90
처음 방식
getClubInfo 함수를 통해 Promise를 처리한 후, LenArray라는 배열에 해당 값을 추가하는 것을 목표로 하였다.
LenArray에 처리된 데이터가 들어가 있을 거라고 생각한 후 console로 출력한 결과 처리된 값이 아닌 Promise가 배열에 추가된 것을 확인했다..
기존의 코드
async function getClubInfo(i){
await axios.get(`${baseUrl}/clubs/${clubIdList[i]}/concise_info`).then((resConciseInfo) =>{
const DetailClubInfoOne = {
id : i,
CurNumPeople : resConciseInfo.data["body"]["current_number_of_people"],
HashTag : resConciseInfo.data["body"]["hashtag"],
MaxNumPeople : resConciseInfo.data["body"]["maximum_number_of_people"],
Name : resConciseInfo.data["body"]["name"],
}
//console.log(DetailClubInfoOne)
return DetailClubInfoOne
})}
}
.
.
.
useEffect(()=> {
//setdetailClubInfoList([]);
let LenArray = Array.apply(null, Array(clubIdList.length)).map((v,i) => (i));
console.log(detailClubInfoList)
console.log("Start")
Promise.all(
LenArray.map((v, i) => {
GetClubInfo(i)
})
)
console.log("ENd")
console.log("EndArray:" + result)
//console.log(detailClubInfoList)
}, [detailFinish]);
LenArray 출력 결과
Array [
Promise {
"_U": 0,
"_V": 1,
"_W": undefined,
"_X": null,
},
Promise {
"_U": 0,
"_V": 1,
"_W": undefined,
"_X": null,
},
]
//LenArray의 console 출력 값
찾아본 결과, Promise.all에 있는 getClubInfo 함수가 Promise가 아닌, 객체를 반환해 주어서 생긴 오류였다.
(promise.all은 promise를 처리해야 한다. promise.all([promise1, promise2 ...])
그러나, 나는 promise.all([object1, object2...])처럼 promise가 아닌 값을 리턴했다.)
해결 방식
getClubInfo 함수가 처리하는 것이 아닌, Promise.all에서 직접 처리하게 함으로써 오류를 해결했다.
async function test(){
let LenArray = Array.apply(null, Array(clubIdList.length)).map((v,i) => (i));
console.log(detailClubInfoList)
console.log("Start")
let arr = await Promise.all(LenArray.map((v, i) =>
axios.get(`${baseUrl}/clubs/${clubIdList[i]}/concise_info`).then((resConciseInfo) =>{
const DetailClubInfoOne = {
id : i,
CurNumPeople : resConciseInfo.data["body"]["current_number_of_people"],
HashTag : resConciseInfo.data["body"]["hashtag"],
MaxNumPeople : resConciseInfo.data["body"]["maximum_number_of_people"],
Name : resConciseInfo.data["body"]["name"],
}
console.log(DetailClubInfoOne)
return DetailClubInfoOne
})
))}