组件将文本类型的受控输入更改为不受控制。输入元素不应从受控制切换为不受控制

Question

这是SignIn Component。我正在使用Firebase概念。用于设计目的的材料UI。我正在使用功能组件。

验证用户身份是否正确？我遇到错误。

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;

此Firebase组件

import firebase from 'firebase';
require('firebase/app')
require('firebase/auth')

const Firebase = firebase.initializeApp({
  apiKey: "AIzaSyC_3KRb7H0Xw1-DGfqAzqfxeZaw3W5PaLg",
  authDomain: "my-login-page-react.firebaseapp.com",
  databaseURL: "https://my-login-page-react.firebaseio.com",
  projectId: "my-login-page-react",
  storageBucket: "my-login-page-react.appspot.com",
  messagingSenderId: "415587749418",
  appId: "1:415587749418:web:ee026252bc0a64c1a57d53"
});

export default Firebase;

Answer 1

问题可能是由您保留值的方式引起的。您可以使用1个钩子处理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}
 />

尝试将您的值分隔为：

 [email,setEmail] : useState("");
 [password,setPassword] : useState("")

Answer 2

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

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

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

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