未处理的拒绝（TypeError）：在 React 中使用 useRef 时无法读取未定义的属性（读取“值”）

Posted 2023-02-25

【中文标题】未处理的拒绝（TypeError）：在 React 中使用 useRef 时无法读取未定义的属性（读取“值”）

【英文标题】：Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'value') when working with useRef in React

【发布时间】：2021-11-22 09:25:16

【问题描述】：

import React from "react";
import  useRef  from "react";
import AuthButton from "../components/AuthButton";
import AuthContainer from "../components/AuthContainer";
import AuthInput from "../components/AuthInput";
import  signup  from "../firebase"

function Signup() 
  const emailRef = useRef();
  const passwordRef = useRef();
  const passwordConfirmRef = useRef();

  async function handleSignup() 
    await signup(emailRef.current.value, passwordRef.current.value);
  

  return (
    <AuthContainer>
      <AuthInput ref=emailRef placeholder="  email" />
      <AuthInput ref=passwordRef type="password" placeholder="  password" />
      <AuthInput ref=passwordConfirmRef type="password" placeholder="  confirm password" />
      <div className="flex justify-center text-lg text-gray-500 pt-2 pb-5">
        /* <AuthButton text="sign up" /> */
          <button onClick=handleSignup>
        
          <div className="p-1 rounded-full bg-gray-200 hover:bg-gray-300 bg-opacity-50 text-center h-8 w-20">
            sign up
          </div>
        
    </button>
      </div>
    </AuthContainer>
  );


export default Signup;

以上是 Web 应用程序注册页面的组件，我正在关注此视频，使用 refs 和 firebase 使用按钮来更新数据库：https://www.youtube.com/watch?v=_Kv965pA-j8

但是，每当我单击该按钮时，都会出现以下错误： 未处理的拒绝（TypeError）：无法读取未定义的属性（读取“值”）

handleSignup
  11 |  const passwordConfirmRef = useRef();
  12 | 
  13 |  async function handleSignup() 
> 14 |    await signup(emailRef.current.value, passwordRef.current.value);
     | ^  15 |  
  16 | 
  17 |  return (
View compiled
▶ 19 stack frames were collapsed.

我该如何解决这个问题？我最初的计划有一个单独的按钮组件，但那不起作用，所以现在我只是想让所有东西都在同一个组件中工作。

验证输入代码：

import React from 'react'
import  useRef  from "react";

const AuthInput = (props) => 
    return (
        <div className='pt-2 pb-2 px-20 mx-auto my-auto'>
            <input
                className="rounded-lg focus:outline-none text-lg placeholder-gray-500"
                type=props.type
                ref = props.ref
                placeholder=props.placeholder
                // later figure out how to automatically indent the placeholder text and the inputted text
            />
            
        </div>
    )


export default AuthInput

【问题讨论】：

Refs 必须只设置为 DOM 元素，但您将其设置为 AuthInput 组件道具。分享AuthInput代码

@VitaliyRayets 我编辑了问题以包含 AuthInput 代码！

【参考方案1】：

如果您想将父引用扔给子组件，您必须在子组件中使用forwardRef。 Docs

正确的AuthInput 组件示例：

import  forwardRef  from "react";
const AuthInput = forwardRef(( ...otherProps , ref) => 
  return (
    <div className="pt-2 pb-2 px-20 mx-auto my-auto">
      <input
        className="rounded-lg focus:outline-none text-lg placeholder-gray-500"
        type=otherProps.type
        ref=ref
        placeholder=otherProps.placeholder
        // later figure out how to automatically indent the placeholder text and the inputted text
      />
    </div>
  );
);

export default AuthInput;

【讨论】：

谢谢，这解决了我的问题！！我可以问一下 ... 在 otherProps 之前做了什么吗？

Rest parameter ... 语法允许函数接受不定数量的参数作为数组