Блог

Я новичок в react, я попробовал простую форму входа в систему, которая принимает данные пользователя и передает их в бэкэнд. Это приложение также написано для создания токенов, если учетные данные для входа верны. Чтобы принимать вводимые пользователем данные, я добавил функцию onChange() и вызвал ее для каждого поля ввода, однако она по-прежнему недоступна для редактирования. Я не мог найти ошибку. Я также добавил реализацию функции onSubmit (). Я пробовал различные другие способы вызова функции onChange, однако это не увенчалось успехом.

  const [formData, setFormData] = useState({
        clientEmail: "",
        clientPassword: "",
        errorMsg: false,
        loadingSpinner: false,
      });
      
      // destructure form data
      const { clientEmail, clientPassword, errorMsg, loadingSpinner } = formData;
    const handleChange = (evt) => {
          setFormData({
            ...formData,
            [evt.target.name]: evt.target.value,
            errorMsg: "",
          });
        };
    
const handleSubmit = (evt) => {
      evt.preventDefault();
    
      //form validation
      if (isEmpty(clientEmail) || isEmpty(clientPassword)) {
        setFormData({
          ...formData,
          errorMsg: "All field are Required",
        });
      } else if (!isEmail(clientEmail)) {
        setFormData({
          ...formData,
          errorMsg: "Invalid Email new",
        });
      } else {
        const { clientEmail, clientPassword} = formData;
      
        const data = {
          clientEmail,
          clientPassword,
        };
        setFormData({
          ...formData,
          loadingSpinner: true,
        });
       
        ClientLoginUser(data)
          .then((response) => {
     
            console.log(response);
            setClientAuthentication(response.data.token, response.data.clients);
          
          
              if (isClientAuthenticated()) {  
            console.log("client Successful");
              history.push("./clientDashboard");
            }
          })
          .catch((err) => {
            console.log("client login api controller error: ", err);
            setFormData({
              ...formData,
              errorMsg:err.response.data.errorMessage,
              loading:false
            });

          });
      }
    };
    
    const showLoginForm = () => (
        <Fragment>
          <div className="card px-5 py-5">
           
            <div className="card-body">
              <h5 className="card-title text-center pb-3">Client Login</h5>
              <form className="login-form" 
              onSubmit={handleSubmit} 
              noValidate>
    
                {/* Email */}
                <div className="form-group">
                  <input
                    type="email"
                    className="form-control"
                    name="email"
                     value={clientEmail}
                    placeholder="Email"
                     onChange={handleChange}
                  />
                </div>
                {/* Password */}
                <div className="form-group">
                  <input
                    type="password"
                    className="form-control"
                    name="password"
                     value={clientPassword}
                    placeholder="Password"
                    onChange={handleChange}
                  />
                </div>
                {/* Submit button */}
                <div className="form-group pt-3">
                  <button
                    type="submit"
                    className="btn btn-primary btn-lg btn-block"
                  >
                    Login
                  </button>
                </div>
              </form>
            </div>
          </div>
        </Fragment>
      );
    
      /****************************
       * Render
       ****************************/
      return (
        <div className="login-container">
          <GridWrapper>
            <div className="container-fluid">
              <div className="row px-4 vh-100">
                <div className="col-12 col-md-8 my-auto pl-5">
                  <img
                    src="/images/welcomeLogo.png"
                    className="img-fluid"
                    alt="Logo"
                  />
                </div>
                <div className="col-12 col-md-3 align-self-center">
                  {errorMsg amp;amp; showErrorMsg(errorMsg)}
                  {loadingSpinner amp;amp; (
                    <div className="text-center pb-5">{showLoading()}</div>
                  )}
    
                  {showLoginForm()}
                </div>
              </div>
            </div>
          </GridWrapper>
        </div>
      );
    };
      // return <p>ClientLogin Component</p>;
 

Входные name данные in не совсем такие же, как в formData состоянии

у тебя такое состояние

 const [formData, setFormData] = useState({
    clientEmail: "",
    clientPassword: "",
    errorMsg: false,
    loadingSpinner: false,
  });
 

которые содержат такие данные, как clientEmail

 <input
    type="email"
    className="form-control"
    name="email"
    value={clientEmail}
    placeholder="Email"
    onChange={handleChange}
  />
 

который содержит name="email"

в handleChange функции

 const handleChange = (evt) => {
      setFormData({
        ...formData,
        [evt.target.name]: evt.target.value,
        errorMsg: "",
      });
    };
 

вы содержите [evt.target.name]: evt.target.value

это означает, что вы пытаетесь присвоить новые значения formData.email не formData.clientEmail

есть два решения

сначала вы можете измениться

 const [formData, setFormData] = useState({
    email: "",
    ...
  });
 

или вы можете

 <input
 type="email"
  className="form-control"
  name="clientEmail"
  value={clientEmail}
  placeholder="Email"
  onChange={handleChange}
/>