inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

[리뉴얼] React로 NodeBird SNS 만들기

로그인 폼 만들기

Cannot read properties of undefined (reading 'value')

2029

거휘

작성한 질문수 9

0

 
안녕하세요. 이번에 유료 수강하게된 입문자 입니다. 위 에러를 아무리 찾아봐도 답을 찾지 못하였습니다. 잘 부탁드립니다
 
import React, { useCallback, useState } from 'react'
import { Button, Form, Input } from 'antd'
import Link from 'next/link'
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 onSubmitForm = useCallback(
        () => {
            console.log(id, password)
            setIsLoggedIn(true)
        },
        [id, password]
    )
    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={{ marginTop: 10 }}>
                <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
                <Link href="/signup"><a><Button>회원가입</Button></a></Link>
            </div>
        </Form>
    )
}
export default LoginForm

Next.js nodejs react express redux

답변 1

0

제로초(조현영)

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

0

거휘

해당 페이지 입니다.

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

 

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

0

제로초(조현영)

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

0

거휘

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

0

제로초(조현영)

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

0

거휘

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

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

import React, { useCallback } from "react"
import { Avatar, Button, Card } 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 { Menu, Input, Row, Col } from 'antd'

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

const AppLayout = ({ children }) => {

    const [isLoggedIn, setIsLoggedIn] = 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 = {
    children: PropTypes.node.isRequired
}

export default AppLayout

0

거휘

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

넥스트 버젼 질문

0

90

2

로그인시 401 Unauthorized 오류가 뜹니다

0

104

1

무한 스크롤 중 스크롤 튐 현상

0

192

1

특정 페이지 접근을 막고 싶을 때

0

116

2

createGlobalStyle의 위치와 영향범위

0

102

2

인라인 스타일 리렌더링 관련

0

97

2

vsc 에서 npm init 설치시 오류

0

157

2

nextjs 15버전 사용 가능할까요?

0

166

1

화면 새로고침 문의

0

129

1

RTK에서 draft, state 차이가 있나요?

0

160

2

Next 14 사용해도 될까요?

0

455

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

359

1

url 오류 질문있습니다

0

214

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

391

1

sudo certbot --nginx 에러

0

1293

2

Minified React error 콘솔에러 (hydrate)

0

477

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

255

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

337

1

npm run build 에러

0

525

1

front 서버 npm run build 중에 발생한 에러들

0

399

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

350

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

290

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

249

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

206

1