data.map() in not function 에러 해결법
앱 개발 도중 data.map() in not function 이런 에러를 보았다.
결국 data는 배열 형태가 아니기 때문에? map이 작동이 안되는 것이다.
에러가 나던 시점 코드
const [faceColor, setFaceColor] = useState();
let faceConfig = {
method: "get",
url:
"http://everyweardev-env.eba-azpdvh2m.ap-northeast-2.elasticbeanstalk.com/api/v1/user/skinType/",
headers: {},
};
const colorGetData = async () => {
try {
axios(faceConfig).then(function (res) {
let skin = [];
res.data.data.map((u) => {
switch (u.skinType) {
case "normal":
skin.push({ skinType: "중간톤", code: u.code });
break;
case "bright":
skin.push({ skinType: "밝은톤", code: u.code });
break;
case "semiBright":
skin.push({ skinType: "약간 밝은톤", code: u.code });
break;
case "semiDark":
skin.push({ skinType: "약간 진한톤", code: u.code });
break;
case "dark":
skin.push({ skinType: "진한톤", code: u.code });
break;
}
});
setFaceColor(skin);
});
} catch (err) {
console.log(err);
}
};
(...)
<ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
{faceColor.map((data) => (
<>
<TouchableHighlight style={styles.facecontainer}>
<>
<SvgCssUri
uri={data.imgUrl}
width="60%"
height="30%"
marginTop="20%"
key={data.key}
/>
<Text style={styles.skintext}>{data.faceType}</Text>
</>
</TouchableHighlight>
</>
))}
</ScrollView>
여기서 faceColor라는 이름의 변수에 useState()로 기본값을 배열로 지정해주지 않았었다. 이유는 위에 보면 데이터를 받아오고 그 데이터를 넣는 과정에서 skin이라는 이름의 변수에 배열로 설정했고, 이로 인해 useState()를 배열로 설정할 필요가 없다고 판단했기 때문이다.
하지만 역시 내 생각이 아닌 이론대로 했어야했나보다.
해결 코드
const [faceColor, setFaceColor] = useState([]);
스탯오버플로우에 질문을 남긴 결과....
결국은 useState([]) 이렇게 배열로 기본값을 지정해놓았어야 했던 것이다.
생각보다 단순한 에러라고 생각하는데 이 상황에서는 왜 이 에러에 대한 해결법이 생각나지 않았을까 나를 다시 돌아보게 된다.
Author And Source
이 문제에 관하여(data.map() in not function 에러 해결법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@byungju0624/data.map-in-not-function-에러-해결법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)