-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
react typescript 환경에서 커스텀 훅을 만들어서 사용하려고 하는데 This expression is not callable 에러가 나타납니다.
21.10.29 14:13 작성 조회수 886
0
안녕하세요.
강의 보고 useState, useEffect 를 활용해보고 싶어서 공공데이터 포털에서 제공해주는 openapi 로 커스텀 훅을 만들어 봤습니다.
typescript + webstorm 환경에서 작업중인데요
TS2349: This expression is not callable. No constituent of type 'void | coronaApiPros[]' is callable.
import useDailyCorona: void | coronaApiPros[]
App.tsx 6번 라인의 useDailyCorona(); 코드에서 이런 에러가 나타납니다.
구글링을 계속 해보는데 원하는 답을 찾을수가 없어서 질문드립니다..ㅠㅠ
App.tsx 파일과 커스텀훅 파일인 useDailCorona.tsx 파일을 첨부합니다.
----------- App.tsx ---------
import './App.css';
import React from 'react';
import useDailyCorona from './hooks/useDailyCorona';
function App() {
const items = useDailyCorona();
return (
<ul>
{items?.map((item, index) => (
<li key={index}>createDate: {item.createDt}</li>
))}
</ul>
);
}
export default App;
----------- useDailyCorona.tsx -------------
import {useEffect, useState} from "react";
import {getCorona} from "../corona";
interface coronaApiPros {
createDt: string // 조회 시작 시간
deathCnt: number // 사망자 수
defCnt: number // 확진자 수
gubun: string // 시도명(한글)
gubunCn: string // 시도명(중국어)
gubunEn: string // 시도명(영어)
incDec: number // 전일대비 증감 수
isolClearCnt: number // 격리 해제 수
isolIngCnt: number // 격리중 환자 수
localOccCnt: number // 지역 발생 수
overFlowCnt: number // 해외 유입 수
qurRate: string // 10만명당 발생률
seq: number // 게시글번호 (국내 시도별 발생 현황 고유값)
stdDay: string // 기준 일 시
updateDt: string // 수정 일시 분초
}
function useDailyCorona():void|coronaApiPros[] {
const [items, setItems] = useState();
const coronaItems = getCorona();
useEffect(() => {
coronaItems.then(response => {
setItems(response);
});
}, []);
return items;
}
export default useDailyCorona();
답변을 작성해보세요.
0
김준희
질문자2021.10.29
자답입니다.
function useDailyCorona 를 export default function useDailyCorona 로 수정하니 에러가 해결됐습니다.
왜 따로 쓰면 에러가 나타날까요?
useDailyCorona.tsx 파일을 수정했습니다.
import {useEffect, useState} from "react";
import {getCorona} from "../corona";
interface coronaApiPros {
createDt: string // 조회 시작 시간
deathCnt: number // 사망자 수
defCnt: number // 확진자 수
gubun: string // 시도명(한글)
gubunCn: string // 시도명(중국어)
gubunEn: string // 시도명(영어)
incDec: number // 전일대비 증감 수
isolClearCnt: number // 격리 해제 수
isolIngCnt: number // 격리중 환자 수
localOccCnt: number // 지역 발생 수
overFlowCnt: number // 해외 유입 수
qurRate: string // 10만명당 발생률
seq: number // 게시글번호 (국내 시도별 발생 현황 고유값)
stdDay: string // 기준 일 시
updateDt: string // 수정 일시 분초
}
export default function useDailyCorona(): coronaApiPros[]|void {
const [items, setItems] = useState<coronaApiPros[]>();
const coronaItems = getCorona();
useEffect(() => {
coronaItems.then(response => {
setItems(response);
});
}, []);
return items;
}
답변 2