• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

Auth() 처리 시 Warning: Functions are not valid as a React child 에러 해결방법

22.12.08 18:45 작성 조회수 640

2

강의 따라했는데 아래 에러 나시는 분들
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

버전이 달라지면서 Auth지원 관련해서 강의와 차이가 생긴 듯 합니다

 

간단한 해결 방법 입니다

  1. ./src/hoc/auth.js 파일의 Auth함수를 익명함수가 아닌 기명함수로 변경

    import { useEffect } from "react";
    import { useDispatch } from "react-redux";
    import { auth } from "../_actions/user_action";
    
    const Auth = (SpecificComponent, option, adminRoute = null) => {
    
      function AuthenticationCheck(props) {
        const dispatch = useDispatch();
    
        useEffect(() => {
          dispatch(auth()).then((res) => {
            console.log(res);
          });
        }, []);
    
        return <SpecificComponent />;
      }
    
      return AuthenticationCheck;
    };
    export default Auth;

    2. ./src/compoenent/views/RandingPage, LoginPage, RegsterPage export시 Auth 처리

    //LendingPage
    export default Auth(LandingPage, null);
    
    //LoginPage
    export default Auth(LoginPage, false);
    
    //RegisterPage
    export default Auth(RegisterPage, false);

 

왜인진 모르겠지만 저는 Auth를 익명함수로 두니까 Auth(컴포넌트) 처리시에 계속 에러가 나더라구요

기명함수로 고쳤더니 에러 해결됐습니다

답변 0

답변을 작성해보세요.

답변을 기다리고 있는 질문이에요.
첫번째 답변을 남겨보세요!