data.map() in not function 에러 해결법

슬기로운 코딩생활·2021년 5월 1일
0

2021.05

목록 보기
1/4

앱 개발 도중 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([]) 이렇게 배열로 기본값을 지정해놓았어야 했던 것이다.

생각보다 단순한 에러라고 생각하는데 이 상황에서는 왜 이 에러에 대한 해결법이 생각나지 않았을까 나를 다시 돌아보게 된다.

0개의 댓글