Reactjs TypeError:无法读取属性'；价值'；验证时未定义的

大家好，我在尝试验证React/NextJS上的输入组件时遇到此错误

未处理的运行时错误 TypeError:无法读取未定义的属性“值”

来源：

.next\static\chunks\pages\index.js (76:33) @ SignUp

  74 | name="username"
  75 | label="Nombre completo:"
> 76 | defaultValue={error.user.value}
     |                         ^
  77 | disabled={isLoading}
  78 | ref={username}
  79 | message={error.user.msg}

这是我的输入组件：

import React, { Component } from "react";
import { IoMdCheckmark } from "react-icons/io";
import { IoCloseSharp } from "react-icons/io5";

const Input = React.forwardRef((props, ref) => {
  class Input extends Component {
    render() {
      return (
        <div className={`input ${props.variant}`}>
          <div className="label">{props.label}</div>
          {props.variant === "warning" ? (
            <div
              className={`icon ${props.variant} bg-${props.variant} text-center rounded-full text-1xl p-px mt-5 mr-3`}
            >
              <IoCloseSharp />
            </div>
          ) : null}
          {props.variant === "success" ? (
            <div
              className={`icon ${props.variant} bg-${props.variant} text-center rounded-full text-1xl p-px mt-5 mr-3`}
            >
              <IoMdCheckmark />
            </div>
          ) : null}
          <input
            type={props.type}
            id={props.id}
            defaultValue={props.defaultValue}
            name={props.name}
            placeholder={props.placeholder}
            ref={ref}
            disabled={props.disabled}
          />
          <div className="message">
            {props.message === "" || props.message === undefined ? (
              <>&nbsp;</>
            ) : (
              props.message
            )}
          </div>
        </div>
      );
    }
  }
  return <Input />;
});

export default Input;

import React，{Component}来自“React”；
从“反应图标/io”导入{IoMdCheckmark}；
从“react icons/io5”导入{IoCloseSharp}；
常量输入=React.forwardRef（（props，ref）=>{
类输入扩展组件{
render（）{
返回(
{props.label}
{props.variant===“警告”(
)：null}
{props.variant==“成功”(
)：null}
{props.message===“”| | props.message===未定义(
) : (
道具信息
)}
);
}
}
返回；
});
导出默认输入；

这是我试图验证的组件：

import React, { useState, createRef } from "react";
import Input from "./Input";
import { FaFacebookSquare } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";
import { BiLogInCircle } from "react-icons/bi";
import { CgSpinner } from "react-icons/cg";

export default function SignUp() {
  const [isLoading, setLoading] = useState(false);
  const [error, setError] = useState({
    user: { error: "", msg: "", value: null },
    email: { error: "", msg: "", value: null },
  });
  const username = createRef();
  const email = createRef();
  const cellphone = createRef();
  const password = createRef();

  const handleLogin = (e) => {
    e.preventDefault();
    setLoading(true);

    // Full-name validation
    if (username.current.value === "") {
      setError({
        user: {
          error: "warning",
          msg: "Ingresa tu nombre completo.",
          value: username.current.value,
        },
      });
      setLoading(false);
    } else {
      setError({
        user: {
          error: "success",
          msg: "Correcto.",
          value: username.current.value,
        },
      });
    }
    // E-mail validation

    if (email.current.value === "" || email.current.value === undefined) {
      setError({
        email: {
          error: "warning",
          msg: "Ingresa tu correo electronico.",
          value: email.current.value,
        },
      });
      setLoading(false);
    } else {
      setError({
        email: {
          error: "success",
          msg: "Correcto.",
          value: email.current.value,
        },
      });
    }

    setTimeout(() => {
      setLoading(false);
    }, 3000);
  };

  return (
    <form onSubmit={(e) => handleLogin(e)}>
      <div className="w-full text-center text-2xl mb-5">Registrate</div>
      <Input
        type="text"
        id="username"
        name="username"
        label="Nombre completo:"
        defaultValue={error.user.value}
        disabled={isLoading}
        ref={username}
        message={error.user.msg}
        variant={error.user.error}
      />
      <Input
        type="text"
        id="email"
        name="email"
        label="Correo electronico:"
        defaultValue={error.email.value}
        disabled={isLoading}
        ref={email}
        message={error.email.msg}
        variant={error.email.error}
      />
      <Input
        type="text"
        id="cellphone"
        name="cellphone"
        label="Numero de celular:"
      />
      <Input
        type="password"
        id="password"
        name="password"
        label="Contraseña:"
      />
      <button
        disabled={isLoading}
        className={`flex flex-row px-3 justify-center items-center border border-black bg-black text-white focus:outline-none w-full rounded-md py-3 text-sm ${
          isLoading && `cursor-not-allowed`
        }`}
      >
        <span className="text-xl">
          <BiLogInCircle />
        </span>
        <span className="flex-1">
          {isLoading ? (
            <CgSpinner className="animate-spin text-xl mx-auto" />
          ) : (
            <div className="text-sm">Registrarme</div>
          )}
        </span>
        <span className="">&nbsp;</span>
      </button>

      <hr className="my-5" />
      <button
        type="button"
        className="flex flex-row px-3 justify-center items-center border border-gray-500 focus:outline-none w-full rounded-md py-3 text-sm"
      >
        <span className="text-xl">
          <FcGoogle />
        </span>
        <span className="flex-1">Registrarme con Google</span>
        <span className="">&nbsp;</span>
      </button>
      <button
        type="button"
        className="flex flex-row px-3 mt-2 justify-center items-center border border-gray-500 focus:outline-none w-full rounded-md py-3 text-sm"
      >
        <span className="text-xl text-blue-400">
          <FaFacebookSquare />
        </span>
        <span className="flex-1">Registrarme con Facebook</span>
        <span className="">&nbsp;</span>
      </button>
    </form>
  );
}

import React，{useState，createRef}来自“React”；
从“/Input”导入输入；
从“react icons/fa”导入{FaFacebookSquare}；
从“反应图标/fc”导入{FcGoogle}；
从“反应图标/bi”导入{BiLogInCircle}；
从“react icons/cg”导入{CgSpinner}；
导出默认函数注册（）{
const[isLoading，setLoading]=useState（false）；
const[error，setError]=useState({
用户：{error:，msg:，value:null}，
电子邮件：{error:，msg:，value:null}，
});
const username=createRef（）；
const email=createRef（）；
const mobile=createRef（）；
const password=createRef（）；
常量handleLogin=（e）=>{
e、 预防默认值（）；
设置加载（真）；
//全名验证
如果（username.current.value==“”）{
设置错误({
用户：{
错误：“警告”，
味精：“Ingrea tu nombre completo.”，
值：username.current.value，
},
});
设置加载（假）；
}否则{
设置错误({
用户：{
错误：“成功”，
味精：“更正。”，
值：username.current.value，
},
});
}
//电子邮件验证
如果（email.current.value==“”| | email.current.value===未定义）{
设置错误({
电邮：{
错误：“警告”，
味精：“Ingrea tu correo electronico.”，
值：email.current.value，
},
});
设置加载（假）；
}否则{
设置错误({
电邮：{
错误：“成功”，
味精：“更正。”，
值：email.current.value，
},
});
}
设置超时（（）=>{
设置加载（假）；
}, 3000);
};
返回(
handleLogin（e）}>
登记
{孤岛加载(
) : (
登记员
)}

当我尝试执行提交时，它会向我发送错误。 知道我做错了什么吗？

---

谢谢：）

@NadiaChibrikova，谢谢你发现我的错误

我更改了更新状态的方法

setError({user: {
          error: "warning",
          msg: "Ingresa tu nombre completo.",
          value: username.current.value,
        }); 

错误：我正在擦除状态

setError({user: {
          error: "warning",
          msg: "Ingresa tu nombre completo.",
          value: username.current.value,
        }); 

更正：正在更新prevState

setError((prevState) => ({
        ...prevState,
        user: {
          error: "warning",
          msg: "Ingresa tu nombre completo.",
          value: username.current.value,
        },
      }));

---

可能是在渲染时，请尝试使用可选链'defaultValue={error？.user？.value}`

setError

不合并字段，设置电子邮件时，您将删除user@NadiaChibrikova谢谢你，我解决了如何更新

setError

=>

setError（（prevState）=>（{…prevState，用户：{error:“warning”，msg:“Ingresa tu nombre completo.”，value:username.current.value，}，}，}；

Cool，很高兴有帮助：）