我在制作 loginPage 时从控制台收到错误，但我不知道出了什么问题（React.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);

above is my code. and whenever i try to write on input tag I keep getting this error message:

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

However I have no clue about this error, can you inform me what is wrong? thx for reading, your help will be appreciated

ps when i remove errors property in state and also remove

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

this code at least i can type something on input value but with those code i even can't type a single alphabet even tho i used handleChange function as onclick event on input tag

Answer 1

From what you have posted here, I would say the most likely issue is that loginData.errors is undefined when you attempt to evaluate the .length property of it. Since there is no undefined.length , you get a TypeError .

The quickest way around this would be to use the optional chaining operator ( ?. ) when getting those properties so that the code will simply move on when it can't find the property:

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