Vue.js, vuex에서 state 배열 변수가 forEach 함수가 안될때

TypeError: uploadImageList.forEach is not a function

분명히 배열로 설정한 변수를 forEach로 각 요소를 순회하려고 했을 때, 위와 같은 에러가 발생했습니다. 너무 당황스럽죠. 이런상황은 언제 만나도 정말 당황스러운 것 같습니다.

 

천천히 로그를 찍어보면서 분석한다면 이 세상에 해결 못 할 오류는 없다!

 

1. 문제 분석

왜 이렇게 될까요? Vue.js가 저를 싫어하는 걸까요? 그럴수도 있어요. 절대 방심하면 안됩니다. 일단 로그를 찍어보도록 하겠습니다. 

 

state.uploadImages.forEach(image => formData.append('couponImages[]', image));

 

처음에는 이런 코드로 실행하려고 했는데 ForEach가 function이 아니라고 했습니다. 그래서 혹시 몰라서 해당 state.uploadImages를 다른 변수의 이름으로 넣어서 똑같이 해봤어요.

 

uploadImageList.forEach(image => formData.append('couponImages[]', image));

 

역시나 똑같은 결과가 나옵니다. uploadImageList의 타입을 한번 로그로 찍어보았습니다.

 

console.log(typeof uploadImageList);

 

 

 

객체라고 뜨네요. 근데 배열도 객체니까 뭔지 잘 알 수 없네요. 그냥 콘솔에 uploadImageList를 찍어보겠습니다.

 

console.log(uploadImageList);

 

 

오잉 FIleList라고 뜨네요. 그런데 파일을 감싸고 있는 괄호가 배열의 [] 가 아니라 {} 중괄호였네요. 배열이지만 배열이 아닌 아주 애매한 아이가 되었어요. 문제를 찾았네요!

 

2. 문제 해결

문제의 해결방법은 아주 간단합니다. 객체 타입으로 되어있는 저 변수를 Object.value 함수를 통해서 배열로 바꿔주고 실행하면 됩니다.

 

const uploadImageList = Object.values(state.uploadImages);

uploadImageList.forEach(image => formData.append('couponImages[]', image));

 

 

이렇게요.

 

 

대괄호로 이쁘게 만들어져 있는 모습을 볼 수 있습니다. 이제 ForEach 함수도 실행이 잘 되겠네요!!