我在登录页面时从控制台收到错误，但我不知道出了什么问题(反应.js)

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

import React,{useState} from "react";
import {connect} from "react-redux";
import {loginUser} from '../../actions/user_action'
function RegisterLogin() {
const [loginData, setLoginData] = useState({
email: "",
password: "",
errors: [],
});
const displayErrors = (errors) => {
errors.map((error,i)=> <p key={i}>{error}</p>)
}
const handleChange = (e) => {

setLoginData({[e.target.name]: e.target.value});
}
const submitForm = (e) => {
e.preventDefault();
let dataToSubmit ={
email: loginData.email,
password: loginData.password
}
if (isFormValid(loginData)){
setLoginData({errors: []});
this.props.dispatch(loginUser(dataToSubmit))
.then(response => {console.log(response)})
}
}
const isFormValid = ({email,password}) => email&&password;

return (
<div className="login-container">

<div className="row login-box">
<h2 className="login">Login</h2>
<form className="column s12">
<div className="col">
<div className="input-field col s12"> 
{/* email */}
<input
name="email"
value={loginData.email}
onChange={e=>{handleChange(e)}}
id="email"
type="email"
className="validate"
placeholder="Email"
/>

<span 
className="helper-text"
data-error="type a proper email"
data-success="email is valid"
/>
</div>
{/* password */}
<div className="input-field  col s12"> 
<input
name="password"
value={loginData.password}
onChange={e=>{handleChange(e)}}
id="password"
type="password"
className="validate"
placeholder="Password"
autoComplete="off"
/>

<span 
className="helper-text"
data-error="wrong password"
data-success="right"
/>
</div>
</div>
{/* errormessages */}
{loginData.errors.length >0 &&(
<div>
{displayErrors(loginData.errors)}
</div>
)} 
{/* buttons */}
<div >
<div className="col s12">
<button 
className="btn waves-white black brighten-2"
type="submit"
name="action"
onSubmit={submitForm}
>
Login
</button>
</div>
</div>
</form>
</div>
<div className="whatever">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.i need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logoi need a logo</div>
</div>
);
}
const mapStateToProps = (state) => {
return {
user: state.user
}
}
export default connect(mapStateToProps)(RegisterLogin);

上面的是我的代码。每当我尝试在输入标签上写入时，我总是得到这个错误信息:

TypeError: Cannot read property 'length' of undefined
RegisterLogin
src/components/RegisterLogin/index.js:43
40 | <div className="row login-box">
41 | <h2 className="login">Login</h2>
42 |   <form className="column s12">
> 43 |     <div className="col">
| ^  44 |       <div className="input-field col s12"> 
45 |       {/* email */}
46 |       <input

但是我对这个错误没有头绪，你能告诉我是怎么回事吗?谢谢你的阅读，感谢你的帮助

p。S当我删除状态中的errors属性并同时删除

时

{loginData.errors.length >0 &&(
<div>
{displayErrors(loginData.errors)}
</div> 

这段代码至少我可以在输入值上输入一些东西但有了这些代码，我甚至不能输入一个字母即使我使用handleChange函数作为输入标签的onclick事件

Answer 1

从你在这里发布的内容来看，我想说最有可能的问题是，当你试图评估.length属性时，loginData.errors是undefined。因为没有undefined.length，你得到一个TypeError。

解决这个问题的最快方法是在获取这些属性时使用可选的链接操作符(?.)，以便代码在找不到属性时简单地继续前进:

{loginData?.errors?.length >0 && (
<div>
{displayErrors(loginData.errors)}
</div> 
)}