Unhandled Runtime Error

Question

아이디랑 비밀번호 입력하고 로그인 누르면 다음과 같은 에러가 표시 되네요 ㅜㅜ           LoginForm.js   UserProfile.js

new01260170 · Answer

아 죄송합니다 제가 뭘 빼먹었었네요 잘 동작됩니다 ㅜㅜ

new01260170 · Answer

아 오타가 있었네요 LggedIn 근데 그거 오타 수정해도 똑같은 에러가 나네요 ㅜㅜ

new01260170 · Answer

아 네 알겠습니다. AppLayout 코드 입니다. import { useState } from 'react' ; import PropTypes from 'prop-types' ; import Link from 'next/link' ; import { Input , Menu , Row , Col } from 'antd' ; import UserProfile from '../components/UserProfile' ; import LoginForm from '../components/LoginForm' ; import styled from 'styled-components' ; const SearchInput = styled ( Input . Search ) ` vertical-align: middle ` ; const AppLayout = ({ children }) => { // ToDo const [ isLoggedIn , setIsLoggedIn ] = useState ( false ); return ( < div > < Menu mode = "horizontal" > < Menu.Item key = "home" > < Link href = "/" >< a > 홈 < Menu.Item key = "profile" > < Link href = "/profile" >< a > 프로필 < Menu.Item key = "search" > < SearchInput enterButton /> < Menu.Item key = "signup" > < Link href = "/signup" >< a > 회원가입 { /* column 사이 간격: gutter */ } < Row gutter = { 8 } > < Col xs = { 24 } md = { 6 } > { isLoggedIn ? < UserProfile setIsLoggedIn = { setIsLoggedIn } /> : < LoginForm setIsLoggedIn = { setIsLoggedIn } /> } < Col xs = { 24 } md = { 12 } > 가운데 메뉴 < Col xs = { 24 } md = { 6 } > 오른쪽 메뉴 { children } ) } // children 값이 있는지 체크하기 위한 용도 AppLayout . propTypes = { children : PropTypes . node . isRequired , }; export default AppLayout ;

new01260170 · Answer

오타는 아닌 것 같습니다. 대소문자까지 같이 해서 확인해 봤어요. 로그인 폼 코드 붙여넣기 해서 드립니다. import { useState , useCallback , useMemo } from 'react' ; import PropTypes from 'prop-types' ; import { Form , Input , Button } from 'antd' ; import Link from 'next/link' ; import styled from 'styled-components' ; const ButtonWrapper = styled . div ` margin-top: 10px; ` ; const FormWrapper = styled ( Form ) ` padding: 10px; ` ; const LoginForm = ({ setIsLoggedIn }) => { const [ id , setId ] = useState ( '' ); const [ password , setPassword ] = useState ( '' ); const onChangeId = useCallback (( e ) => { setId ( e . target . value ); }, []); const onChangePassword = useCallback (( e ) => { setPassword ( e . target . value ); }, []); const style = useMemo (() => ({ marginTop : 10 }), []) const onSubmitForm = useCallback (() => { console . log ( id , password ); setIsLoggedIn ( true ); }, [ id , password ]); return ( < FormWrapper onFinish = { onSubmitForm } > < div > < label htmlFor = "user-id" > 아이디 < br /> < Input name = "user-id" value = { id } onChange = { onChangeId } required /> < div > < label htmlFor = "user-password" > 비밀번호 < br /> < Input name = "user-password" value = { password } onChange = { onChangePassword } required /> < ButtonWrapper style = { style } > < Button type = "primary" htmlType = "submit" loading = {false} > 로그인 < Link href = "/signup" >< a >< Button > 회원가입 ); } LoginForm . propTypes = { setIsLoggedIn : PropTypes . node . isRequired , }; export default LoginForm ;

zerocho · Answer

setIsLggedIn 오타 아닌가요? 로그인폼을 쓰고있는 코드도 알려주세요.