React Json-server 불러오기 질문

Question

json-server을 열어서 useEffect 함수를 통해서 값을 부르는데처음에 undefined 값이 나오고 값이 도착합니다. 어떻게 하면 undefined일 때는 그냥 넘어가고 값이 할당 될 때 넘어오게 할 수 있을 까요?import { useEffect, useState } from 'react'; export default function useFetch(url){ const [data, setData] = useState([]); useEffect(()=>{ fetch(url) .then(res => { return res.json(); }) .then(data => { setData(data); }) }, [url]); return data; }해당 함수를 만들어서 다음과 같이 불러서 확인해보면 처음에 undefined이 출력됩니다.var selMonth = useSelector(state=>{ return state.inventory.selMonth; }) var selInvtory = useFetch("http://localhost:3001/invList?id="+selMonth); if(selInvtory != undefined && selInvtory != [] && selInvtory != null){ console.log(selInvtory[0]); } else { return

Loading...

}값을 받을 때 if문에 안 걸리면 콘솔로 값을 확인하는데 undefined일 때도 출력이 됩니다.

샘톨 · Accepted Answer

비동기 메서드 fetch.then이 실행 완료되기 전에, useFetch의 data가 반환됩니다.a != [] (a는 모든 값)의 조건문은 항상 참입니다.useFetch 메소드를 구현하는데 useEffect는 불필요해 보입니다. 아래 코드로 구현하는 것이 더 간단명료합니다.export default async function useFetch(url){ return fetch(url).then(res => res.json()) }const selMonth = useSelector(state => state.inventory.selMonth) const selUrl = `http://localhost:3001/invList?id=${selMonth}` const selInvtory = await useFetch(selUrl); const loadingMessage = 'Loading...' if(Array.isArray(selInvtory)) { console.log(selInvtory[0]); return null } else { return

{loadingMessage}

}

React Json-server 불러오기 질문

1개의 답변

#json-server 목록