组件正在将受控 i/p 更改为不受控。这是由值从 defined 更改为 undefined 在使用 controlled/

Question

这是我的login.js

import React, { useState } from "react";
// import { BrowserRouter as Router, Route } from "react-router-dom";
import axios from "axios";
import { Redirect } from "react-router-dom";
import Footer from "./Bottom";
// import { FaUser, FaUnlock } from "react-icons/fa";

const Login = () => {
  //functional component
  const [login, setLogin] = useState({ username: "", password: "" });
  // const [isSignUp, setisSignUp] = useState("");

  let user;

  const handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setLogin({ ...Login, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault(); //reload the page

    if (login.username && login.password) {
      axios
        .post("http://localhost:8080/api/registration/login", {
          username: login.username,
          password: login.password,
        })
        .then((response) => {
          sessionStorage.setItem("user", JSON.stringify(response.data));
          user = response.data;
          console.log(user + "**********************");

          var usertype = response.data.usertype;
          console.log(usertype + "////////////");
          console.log(user + "*********");
          if (usertype === 1) return <Redirect to="/profile" />;
          // window.location.href = "http://localhost:3000/profile";
          // console.log("Seller");
          else if (usertype === 0) return <Redirect to="/buyerprofile" />;
          // window.location.href = "http://localhost:3000/buyerprofile";
          // console.log("Buyer");
        })
        .catch((error) => {
          console.log(error.response);
        });
      setLogin({ username: "", password: "" });
    }
  };
  return (
    <>
      <head>
        <link
          rel="stylesheet"
          href="font-awesome-4.7.0\css\font-awesome.min.css"
        />
      </head>
      <section className="vh-100">
        <div className="container h-100">
          <div className="row d-flex justify-content-center align-items-center h-100">
            <div className="col-lg-8 col-xl-9">
              <div className="card text-black" style={{ borderRadius: "25px" }}>
                <div className="card-body p-md-5">
                  <div className="row justify-content-center">
                    <div className="col-md-10 col-lg-6 col-xl-7 order-2 order-lg-1">
                      <p className="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">
                        Login
                      </p>

                      <form onSubmit={handleChange} className="mx-1 mx-md-4">
                        <div className="d-flex flex-row align-items-center mb-4">
                          <i
                            class="fa fa-user-circle fa-lg"
                            aria-hidden="true"
                          ></i>
                          <div className="form-outline flex-fill mb-0">
                            <input
                              type="text"
                              id="username"
                              name="username"
                              className="form-control"
                              placeholder="User Name"
                              value={login.username}
                              onChange={handleChange}
                            />
                            {/* {errors.username &&<p className="error">{errors.username}</p>} */}
                          </div>
                        </div>

                        <div className="d-flex flex-row align-items-center mb-4">
                          <i class="fa fa-unlock fa-lg" aria-hidden="true"></i>{" "}
                          <div className="form-outline flex-fill mb-0">
                            <input
                              type="password"
                              id="password"
                              name="password"
                              className="form-control"
                              placeholder="Password"
                              value={login.password}
                              onChange={handleChange}
                            />
                            {/* {errors.password &&<p className="error">{errors.password}</p>} */}
                          </div>
                        </div>

                        <div className="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
                          <button
                            type="submit"
                            className="btn btn-primary btn-lg"
                            onClick={handleSubmit}
                          >
                            Login
                          </button>
                        </div>
                      </form>
                    </div>
                    <div className="col-md-10 col-lg-6 col-xl-5 d-flex align-items-center order-1 order-lg-2">
                      <img/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
};

export default Login;

& 如果我尝试使用我的凭据登录，它会在控制台中抛出此错误，并且当我开始在输入字段中输入时会立即显示此警告

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.     at input
    at div
    at div
    at form
    at div
    at div
    at div
    at div
    at div
    at div
    at div
    at section
    at Login

我是 React 的新手，我正在尝试使用 React+sprinboot 项目，我看到了一些关于不受控输入到受控的答案，但这里是 in-> 反向受控输入到不受控，那么到底有什么区别呢？

Answer 1

handleChange 函数内部：

    setLogin({ ...Login, [name]: value });

我认为你的意思是写“登录”而不是“登录”，警告可能由此引起。

组件正在将受控 i/p 更改为不受控。这是由值从 defined 更改为 undefined 在使用 controlled/

A component is changing controlled i/p to be uncontrolled. This is caused by value changing from defined to undefined Decide between using controlled/

reactjs

axios