Проблема со значениями ввода в React (компонент меняет контролируемый ввод типа пароля на неконтролируемый.)

Question

Я пытаюсь настроить страницу регистрации с помощью React. Я передаю значения из состояния, чтобы "зарегистрировать" компонент через реквизит. Когда я набираю пароль и пытаюсь отправить его, происходят две вещи:

1. появляется предопределенное предупреждение о том, что пароль и подтвержденный пароль не совпадают
2. появляется сообщение об ошибке «Компонент меняется Контролируемый ввод типа пароля должен быть неконтролируемым. Элементы ввода не должны переключаться с контролируемого на неконтролируемый (или наоборот). Определите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента. " происходит

пс. Я пытался использовать оценку короткого замыкания (например, value = {this.state.fields.name || ''}), но входные значения обновляются до пустого значения. В моем проекте я использую FireBase.

class App extends Component {

  state = {signUpPage: {
              displayName: '',
              email: '',
              password: '',
              confirmPassword: ''
         }

  signUpHandleChange = (event) => {
    const {name, value} = event.target
    this.setState({
      signUpPage: {
        [name]: value
      }
    })
  }

  handleSubmitSignUp = async event => {
    event.preventDefault();
    const { displayName, email, password, confirmPassword} = this.state.signUpPage
    if (password !== confirmPassword) {
      alert("passwords do not match")
      return
    }

    try{
      const {user} = await auth.createUserWithEmailAndPassword(email, password);
      await createUserProfileDocument(user, {displayName});
      this.setState({
        signUpPage: {
          displayName: '',
          email: '',
          password: '',
          confirmPassword: ''
        }
      }) 
    } catch (error) { 
      console.error(error)
    }
  }


 render(){
    return (
      <BrowserRouter>
        <div>
          <SigningPage 
            signUpEmail={this.state.signUpPage.email} 
            signUpPassword={this.state.signUpPage.password}
            signUpConfirmPassword={this.state.signUpPage.confirmPassword}
            signUpValueChange={this.signUpHandleChange}
            signUpsubmit={this.handleSubmitSignUp}/>
        </div>
       </BrowserRouter>
    );
  } }

  //this is the SigningPage component
  const SigningPage = (props) => {
  return <article className={`${classes.signingpageitems} ${classes.signuppage}`}>
                        <h1 >Sign up</h1>
                        <form onSubmit={props.signUpsubmit}>
                            <input 
                                name="email" 
                                type="email" 
                                value={props.signUpEmail} 
                                className={classes.signingpageitem} 
                                onChange={props.signUpValueChange}
                                placeholder="email"
                                required>
                            </input>
                            <input 
                                name="password" 
                                type="password" 
                                value={props.signUpPassword} 
                                className={classes.signingpageitem} 
                                onChange={props.signUpValueChange}
                                placeholder="password"
                                required>
                            </input>
                            <input 
                                name="confirmPassword" 
                                type="password" 
                                value={props.signUpConfirmPassword} 
                                className={classes.signingpageitem} 
                                onChange={props.signUpValueChange}
                                placeholder="confirm password"
                                required>
                            </input>
                            <input type="submit" value="Submit form" className={`${classes.signingpageitem} ${classes.signbtn}`}>

                            </input>
                        </form>
                    </article>
}

Answer 1

Я решил проблему. Атрибут «name» не соответствует атрибуту «value» во входных данных.