React Hooks - TypeError: Cannot read properties of undefined (reading 'displayName')

Question

我正在尝试创建用户注册。单击提交按钮 (CustomButton) 后，我收到 TypeError cannot read properties with displayName as undefined，假设所有 useState 'values' 都未定义。我不确定是否只需要在组件函数中定义 setValues，然后就可以从 return () 中调用 'values'。
非常感谢所有帮助。

import React, { useState } from 'react';
import { auth, createUserProfileDocument } from '../../firebase/firebase.utils'

import FormInput from '../../components/form-input/form-input.component'
import CustomButton from '../../components/custom-button/custom-button.component'

import "./register.styles.scss"


const Register = () => {

  const [values, setValues] = useState({
    displayName: "",
    email: "",
    password: "",
    confirmPassword: ""
  })



  const handleSubmit = async e => {
    e.preventDefault();

    const { displayName, email, password, confirmPassword } = setValues()

    if (password !== confirmPassword) {
      alert("Passwords do not match");
      return
    }

    try {
      const { user } = await auth.createUserWithEmailAndPassword(
        email, 
        password
        )

      await createUserProfileDocument(user, { displayName })
      setValues({
        displayName: "",
        email: "",
        password: "",
        confirmPassword: ""
      })

    } catch (error) {
      console.error(error)
    }
  }

  const handleChange = e => {
    const { name, value } = e.target;

    setValues({ 
      ...values,
      [name]: value 
      })
  }




  return ( 

    <div className='register'>
      <h2>I don't have an account...</h2>
      <span>Sign up with your email and password</span>

      <form className="register-form" onSubmit={handleSubmit}>
        
        <FormInput 
          type='text' 
          name='displayName' 
          value={values.displayName}
          handleChange={handleChange}
          label='Display Name'
          required
          />
        <FormInput 
          type='email' 
          name='email' 
          value={values.email}
          handleChange={handleChange}
          label='Email'
          required
          />
        <FormInput 
          type='password' 
          name='password' 
          value={values.password}
          handleChange={handleChange}
          label='Password'
          required
          />
        <FormInput 
          type='password' 
          name='confirmPassword' 
          value={values.confirmPassword}
          handleChange={handleChange}
          label='Confirm Password'
          required
          />
          <div className="sign-up-button">
            <CustomButton type='submit'>SIGN UP</CustomButton>
          </div>
      </form>
    </div>
  )};

export default Register;

Answer 1

当你想使用你的状态时，只需使用values

const { displayName, email, password, confirmPassword } = values

Answer 2

您正在尝试解构用于更新状态挂钩的函数，而不是状态本身。变化

const { displayName, email, password, confirmPassword } = setValues()

至

const { displayName, email, password, confirmPassword } = values

它应该可以工作。

Answer 3

setValues() return undefined 你需要解构 values

React Hooks - TypeError: Cannot read properties of undefined (reading 'displayName')

React Hooks - TypeError: Cannot read properties of undefined (reading 'displayName')

javascript

jsx

reactjs

react-hooks