Javascript 组件正在将文本类型的受控输入更改为非受控输入。输入元件不应从受控切换到非受控

这是

登录组件

。我使用的是Firebase概念。用于设计目的的材料界面。我使用的是功能组件

这是验证用户身份的正确方法吗？我面临一个错误

import React, { useState } from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";

import Firebase from "../services/Firebase";


const Signin = () => {
  const [values, setValues] = useState({email: "",password: ""})

  const useStyles = makeStyles(theme => ({
    paper: {
      marginTop: theme.spacing(8),
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: theme.palette.secondary.main
    },
    form: {
      width: "100%", // Fix IE 11 issue.
      marginTop: theme.spacing(1)
    },
    submit: {
      height: 48,
      padding: "0 15px",
      margin: theme.spacing(7)
    }
  }));
  
  const classes = useStyles();
  const signin = (e) => {
    e.preventDefault();
    Firebase.auth().signInWithEmailAndPassword(values.email, values.password).then((u) => {
      console.log(u)
    }).catch((err) => {
      console.log(err);
    })
  }

  const signup = (e) => {
    e.preventDefault();
    Firebase.auth().createUserWithEmailAndPassword(values.email, values.password).then((u) => {
      console.log(u)
    }).catch((err) => {
      console.log(err);
    })
  }

  const handleChange = (e) => {
    setValues({
      [e.target.name]: e.target.value
    })
  }

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            placeholder="Enter Email.."
            onChange={(e) => handleChange(e)}
            value={values.email}
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            placeholder="Enter Password.."
            type="password"
            onChange={(e) => handleChange(e)}
            value={values.password}
          />

          <Button
            type="submit"
            margin="normal"
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={(e) => signin(e)}
          >
            Sign In
          </Button>
          <Button
            type="submit"
            margin="normal"
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={(e) => signup(e)}
          >
            Sign Up
          </Button>
        </form>
      </div>
    </Container>
  )
}

export default Signin;

---

问题可能是由保存值的方式引起的。用一个钩子处理2个值。当你打电话的时候

setValues({
  [e.target.name]: e.target.value
})

它可能会覆盖以前的值，该值具有2个值和1个值（电子邮件或密码），因此其中一个值无法识别，并且

 //This is an uncontrolled component
 <TextField
        variant="outlined"
        margin="normal"
        required
        fullWidth
        placeholder="Enter Email.."
        onChange={(e) => handleChange(e)}
        value={unidentified}
 />

---

这将删除初始对象键对，使TextField中的值={values.*}不受控制

setValues({
      [e.target.name]: e.target.value
    })

要覆盖保留早期对象密钥对，请使用扩展操作-

setValues({...values,
      [e.target.name]: e.target.value
    })

---

您可以添加stacktrace吗？哪个组件出现错误？如何获取stacktrace。好心的建议。在这里，我澄清一件事，没有错误。编译成功，谢谢！这也是解决问题的一种方法！

setValues({
      [e.target.name]: e.target.value
    })

setValues({...values,
      [e.target.name]: e.target.value
    })