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

【问题标题】：A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控
【发布时间】：2020-11-01 14:19:57
【问题描述】：

这是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;

【问题讨论】：

您能否添加堆栈跟踪，哪个组件给出了错误？
如何获取堆栈跟踪。好心的建议。在这里，我澄清一件事，没有错误。编译成功。

标签： javascript css reactjs styles react-hooks

【解决方案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("")

【讨论】：

谢谢！这也是解决问题的一种方式！

【解决方案2】：

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

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

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

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

【讨论】：