Блог

Итак, сегодня я изучал свой курс React на Udemy и наткнулся на ошибку, при которой приложение react отображает [object Object] вместо JSX (которое должно быть пустым полем ввода), кроме того, поскольку поле ввода имеет метод onChange, входное значение также не может измениться. Вот изображение приложения, а также код, приведенный ниже:-

  import React, { useState, useEffect, useReducer } from "react";  import Card from "../UI/Card/Card"; import classes from "./Login.module.css"; import Button from "../UI/Button/Button";  const emailReducer = (state, action) =gt; {  if(action.type === 'USER_INPUT'){  return {value: action.value, isValid: action.value.includes('@')};  }  if(action.type === 'INPUT_BLUR'){  return {value: state.value, isValid: state.value.includes('@')};  }  return { value: '', isValid: false }; };  const Login = (props) =gt; {  // const [enteredEmail, setEnteredEmail] = useState("");  // const [emailIsValid, setEmailIsValid] = useState();  const [enteredPassword, setEnteredPassword] = useState("");  const [passwordIsValid, setPasswordIsValid] = useState();  const [formIsValid, setFormIsValid] = useState(false);   const [emailState, dispatchEmail] = useReducer(emailReducer, {  value: '',  isValid: false  });   useEffect(() =gt; {  console.log("EFFECT RUNNING");   return () =gt; {  console.log("EFFECT CLEANUP");  };  }, []);   const emailChangeHandler = (event) =gt; {  dispatchEmail({type: 'USER_INPUT', value: event.target.value});   setFormIsValid(  emailState.isValid amp;amp; enteredPassword.trim().length gt; 6  );  };   const passwordChangeHandler = (event) =gt; {  setEnteredPassword(event.target.value);   setFormIsValid(  emailState.isValid amp;amp; event.target.value.trim().length gt; 6  );  };   const validateEmailHandler = () =gt; {  dispatchEmail({type: 'INPUT_BLUR'});  };   const validatePasswordHandler = () =gt; {  setPasswordIsValid(enteredPassword.trim().length gt; 6);  };   const submitHandler = (event) =gt; {  event.preventDefault();  props.onLogin(emailState.value, enteredPassword);  };   return (  lt;Card className={classes.login}gt;  lt;form onSubmit={submitHandler}gt;  lt;div  className={`${classes.control} ${  emailState.isValid === false ? classes.invalid : ""  }`}  gt;  lt;label htmlFor="email"gt;E-Maillt;/labelgt;  lt;input  id="email"  value={emailState}  onChange={emailChangeHandler}  onBlur={validateEmailHandler}  /gt;  lt;/divgt;  lt;div  className={`${classes.control} ${  passwordIsValid === false ? classes.invalid : ""  }`}  gt;  lt;label htmlFor="password"gt;Passwordlt;/labelgt;  lt;input  type="password"  id="password"  value={enteredPassword}  onChange={passwordChangeHandler}  onBlur={validatePasswordHandler}  /gt;  lt;/divgt;  lt;div className={classes.actions}gt;  lt;Button type="submit" className={classes.btn} disabled={!formIsValid}gt;  Login  lt;/Buttongt;  lt;/divgt;  lt;/formgt;  lt;/Cardgt;  ); };  export default Login;    

Ваш emailState объект имеет следующую форму:

 { value: string, isValid: boolean }  

Поэтому в поле ввода вам нужно использовать value атрибут:

 lt;input  id="email"  value={emailState.value}  onChange={emailChangeHandler}  onBlur={validateEmailHandler}  /gt;  

Вы передаете весь emailState объект на вход, когда вам, вероятно, нужно вложенное value свойство. Вы можете перейти emailState.value к value реквизиту ввода или заранее разрушить состояние и передать value напрямую.

 const [{ isValid, value }, dispatchEmail] = useReducer(emailReducer, {  value: '',  isValid: false });  ...  lt;input  id="email"  value={value}  onChange={emailChangeHandler}  onBlur={validateEmailHandler} /gt;