React项目本地运行出现Uncaught TypeError错误求助

我是JavaScript、React新手，正通过YouTube视频学习开发。代码在Visual Studio中无报错，但本地运行时出现大量「Uncaught TypeError: Cannot read properties of undefined (Reading '***')」错误。以下是我的项目代码：

App.js 文件 #

import "./App.css";
import Form from "./Components/Form";

function App() {
  return (
    <div className="App">
      <Form />
    </div>
  );
}

export default App;

Form.js 文件（位于项目的components文件夹中） #

import React from "react";
import "../App.css";
import {useForm} from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object().shape({
    Name: yup.string().required(),
    AddressLine1: yup.string().required(),
    AddressLine2: yup.string().required(),
    AddressLine3: yup.string().required(),
    AddressLine4: yup.string().required(),
    City: yup.string().required(),
    StateProvinceCounty: yup.string().required(),
    Postcode: yup.string().required(),
    Country: yup.string().required(),

})

function Form() {
    const {register, handleSubmit, errors} = useForm({
        resolver: yupResolver(schema)});

const submitForm = (data) =>{
    console.log(data);
};

    return (
        <div className= "Form">
            <div className="title"> Details</div>
            <div className="inputs">
            <form onSubmit={handleSubmit(submitForm)}>
                    <input type="text" 
                    name="Name" 
                    placeholder=" Name" 
                    ref={register}/>
                    <p>{errors.Name?.message}</p>
                    <input 
                        type="text" 
                        name="AddressLine1" 
                        placeholder="AddressLine1" 
                        ref={register}
                    />
                    <p>{errors.AddressLine1?.message}</p>
                    <input 
                        type="text" 
                        name="AddressLine2" 
                        placeholder="AddressLine2" 
                        ref={register}
                    />
                    <p>{errors.AddressLine2?.message}</p>
                    <input 
                        type="text" 
                        name="AddressLine3" 
                        placeholder="AddressLine3" 
                        ref={register}
                    />
                    <p>{errors.AddressLine3?.message}</p>
                    <input 
                        type="text" 
                        name="AddressLine4" 
                        placeholder="AddressLine4" 
                        ref={register
                    }/>
                    <p>{errors.AddressLine4?.message}</p>
                    <input 
                        type="text" 
                        name="City" 
                        placeholder="City" 
                        ref={register}
                    />
                    <p>{errors.City?.message}</p>
                    <input 
                        type="text" 
                        name="StateProvinceCounty" 
                        placeholder="City" 
                        ref={register}
                    />
                    <p>{errors.StateProvinceCounty?.message}</p>
                    <input 
                        type="text" 
                        name="Postcode" 
                        placeholder="City" 
                        ref={register}
                    />
                    <p>{errors.Postcode?.message}</p>
                    <input 
                        type="text" 
                        name="Country" 
                        placeholder="City" 
                        ref={register}
                    />
                    <p>{errors.Country?.message}</p>
                </form>
            </div>
        </div>
    );

}

export default Form;

Index.js 文件 #

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />
);
reportWebVitals();

错误核心原因 #

你使用的是react-hook-form v7版本，但代码写法仍沿用了v6及更早版本的逻辑：v7中已经移除了顶层的errors对象，直接解构errors会得到undefined，当你尝试访问errors.Name?.message这类属性时，就会抛出「Cannot read properties of undefined」的错误。

修复步骤 #

只需修改Form组件里useForm的解构代码：

原有代码：

const {register, handleSubmit, errors} = useForm({
    resolver: yupResolver(schema)});

修改为：

const {register, handleSubmit, formState: { errors }} = useForm({
    resolver: yupResolver(schema)});

额外优化建议 #

你的部分输入框placeholder存在错误，比如StateProvinceCounty、Postcode、Country的placeholder都写为"City"，建议修正为对应字段的提示文字，例如将StateProvinceCounty的placeholder改为"State/Province/County"，提升用户体验。

内容的提问来源于stack exchange，提问作者SamHam30