인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

거휘's profile image
거휘

asked

[Renewal] Creating NodeBird SNS with React

Create a login form

Cannot read properties of undefined (reading 'value')

Written on

·

1.9K

0

 
안녕하세요. 이번에 유료 수강하게된 입문자 입니다. 위 에러를 아무리 찾아봐도 답을 찾지 못하였습니다. 잘 부탁드립니다
 
import React, { useCallbackuseState } from 'react'
import { ButtonFormInput } from 'antd'
import Link from 'next/link'

const LoginForm = ({ setIsLoggedIn }) => {

    const [idsetId] = useState('')
    const [passwordsetPassword] = useState('')

    const onChangeId = useCallback(
        (e=> {
            setId(e.target.value)
        },
        []
    )

    const onChangePassword = useCallback(
        (e=> {
            setPassword(e.target.value)
        },
        []
    )

    const onSubmitForm = useCallback(
        () => {
            console.log(idpassword)
            setIsLoggedIn(true)
        },
        [idpassword]
    )
    return (
        <Form onFinish={onSubmitForm}>
            <div>
                <label htmlFor="user-id">아이디</label>
                <br />
                <Input name="user-id" value={id} onChange={onChangeId} required />
            </div>
            <div>
                <label htmlFor="user-password">비밀번호</label>
                <br />
                <Input
                    name="user-password" 
                    type="password" 
                    value={password}
                    onChange={onChangePassword} 
                    required            
                />
            </div>
            <div style={marginTop10 }}>
                <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
                <Link href="/signup"><a><Button>회원가입</Button></a></Link>
            </div>
        </Form>
    )
}

export default LoginForm
Next.jsnodejsreactexpressredux

Answer 1

0

zerocho님의 프로필 이미지
zerocho
Instructor

에러메시지에 보시면 signup.js에 문제가 있다고 써있습니다.

거휘님의 프로필 이미지
거휘
Questioner

해당 페이지 입니다.

증상은 아이디 비밀번호 입력칸에 타이핑이 되지 않고 위 에러처럼 표시됩니다.

 

import React from "react"
import Head from 'next/head'
import AppLayout from "../components/AppLayout"


const Signup = () => {
    return (
        <>
            <Head>
                <title>회원가입 | NodeBird</title>
            </Head>
            <AppLayout>회원가입 페이지</AppLayout>
        </>
    )
}

export default Signup
zerocho님의 프로필 이미지
zerocho
Instructor

에러메시지 왼쪽 상단에 화살표있는데 이전으로 가보면 뭐가 나오나요?

거휘님의 프로필 이미지
거휘
Questioner

다른 에러인데 바로 제 밑에 수강생분께서 남기신 TypeError: Cannot read property 'suppressHydrationWarning' of null과 같은 에러입니다.

zerocho님의 프로필 이미지
zerocho
Instructor

e.target.value 대신 e.currentTarget.value 해보세요.

거휘님의 프로필 이미지
거휘
Questioner

전날 e.currentTarget.value도 시도 해봤었습니다만 변화가 없었습니다.

나머지 페이지 코드들도 보여드리겠습니다.

import React, { useCallback } from "react"
import { AvatarButtonCard } from "antd"


const UserProfile = ({ setIsLoggedIn }) => {

    const onLogOut = useCallback(
        () => {
            setIsLoggedIn(false)
        },
        [],
    )

    return (
        <Card
            actions={[
                <div key="twit">짹짹<br />0</div>,
                <div key="followings">팔로잉<br />0</div>,
                <div key="followers">팔로워<br />0</div>
            ]}
        >
            <Card.Meta 
                avatar={<Avatar>Son</Avatar>}
                title="Son"
            />
            <Button onClick={onLogOut}>로그아웃</Button>
        </Card>
    )
}

export default UserProfile

 

 

import React, { useState } from 'react'
import PropTypes from 'prop-types'
import Link from 'next/link'
import { MenuInputRowCol } from 'antd'

import UserProfile from '../components/UserProfile'
import LoginForm from '../components/LoginForm'

const AppLayout = ({ children }) => {

    const [isLoggedInsetIsLoggedIn] = useState(false)

    return (
        <div>
            <Menu mode="horizontal">
                <Menu.Item>
                    <Link href='/'><a>노드버드</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Link href='/profile'><a>프로필</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Input.Search enterButton style={verticalAlign'middle'}} />
                </Menu.Item>
                <Menu.Item>
                    <Link href='/signup'><a>회원가입</a></Link>
                </Menu.Item>
            </Menu>
            <Row gutter={8}>
                <Col xs={24} md={6}>
                    {isLoggedIn ? <UserProfile setIsLoggedIn={setIsLoggedIn} /> : <LoginForm setIsLoggedIn={setIsLoggedIn} />}
                </Col>
                <Col xs={24} md={12}>
                    {children}
                </Col>
                <Col xs={24} md={6}>
                    <a href="https://www.zerocho.com" target="_blank" ref="noreferrer noopener">Made by ZeroCho</a>
                </Col>
            </Row>
        </div>
    )
}

AppLayout.propTypes = {
    childrenPropTypes.node.isRequired
}

export default AppLayout
거휘님의 프로필 이미지
거휘
Questioner

소중한 시간 내주셔서 감사합니다. 결국 처음부터 다시 코딩하니 위 에러들없이 정상적으로 출력됩니다. 아마 오타가 있었던것 같습니다. 덕분에 강의를 이어갈수 있게 됐습니다.

거휘's profile image
거휘

asked

Ask a question