[에러] Warning: useEffect must not return anything besides a function, which is used for clean-up.

posinity·2022년 12월 29일
1

React

목록 보기
16/58

Warning: useEffect must not return anything besides a function, which is used for clean-up.

It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:

useEffect(() => {
async function fetchData() {
// You can await here
const response = await MyAPI.getData(someId);
// ...
}
fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

이런 에러 내용이었다.

https://isotropic.co/how-to-fix-the-useeffect-must-not-return-anything-besides-a-function-warning/
이곳에 관련 자료가 있었는데

useEffect를 사용할 땐 비동기 작업을 함수로 래핑한 다음 useEffect콜백에서 호출해야 한다고 한다

문제 예시

useEffect(async () => {
    setUsersLoading(true);
    // getUsers is your api call function that returns a promise
    const result = await getUsers();
    setUsers(result);
    setUsersLoading(false);
    // no values in the dependency array means this effect will run once when the component mounts
  }, []);

그냥 async 함수를 썼다

해결책 예시

useEffect(() => {
    // wrap your async call here
    const loadData = async () => {
      setUsersLoading(true);
      const result = await getUsers();
      setUsers(result);
      setUsersLoading(false);
    };

    // then call it here
    loadData();
  }, []);

함수로 맵핑한 다음 아래 호출했다.
매니저님한테 피드백받고 바꾼 부분이었는데..

useEffect를 쓸 때는 함수로 선언하자!

const abc = async () => {
    try {
      const data = await baseURL.get(`/user`);
      setIsLogin(data.data.data);
    } catch (error) {
      setIsLogin(false);
    }
  };

  useEffect(() => abc(), []);

이런식으로 쓰는것도 안되는듯.
콘솔에러 여전히 뜬다

profile
문제를 해결하고 가치를 제공합니다

0개의 댓글