Компонент изменяет контролируемый ввод текста типа на неконтролируемый. Элементы ввода не должны переключаться с управляемого на неуправляемый.

Question

Это SignIn Component. Я использую концепцию Firebase. Материальный интерфейс для целей проектирования. Я использую функциональный компонент.

Войти handleChange (e)} value = {values.email} /> handleChange (e)} value = {values.password} /> signin (e)}> Sign In signup (e)}> Sign Up )} экспортировать вход по умолчанию ;

Это 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

Это приведет к удалению исходных пар ключей объекта, делая значение = {values. *} В TextField неконтролируемым.

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

Чтобы переопределить сохранение более ранних пар ключей объекта, используйте операцию распространения -

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

Answer 2

Проблема может быть вызвана тем, как вы храните ценности. Вы обрабатываете 2 значения с помощью 1 крючка. Когда вы вызываете

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("")