組件正在將文本類型的受控輸入更改為不受控制。 輸入元素不應從受控切換到不受控

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

這將刪除初始的 object 密鑰對，使TextField中的 value={values.*} 不受控制。

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

要覆蓋保留較早的 object 密鑰對，請使用擴展操作 -

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