Функция getderivedstate делает состояние недоступным для редактирования - PullRequest
Новая
       0

Функция getderivedstate делает состояние недоступным для редактирования

0 голосов
/ 05 октября 2018

Я использую реагирование с метеором. В настоящее время у меня есть форма, которая представляет собой обновление информации о пользователе. Я загружаю в форму такую ​​информацию, как адрес электронной почты и номер телефона, автоматически, используя функцию getderivedstatefromprops, но проблема в том, что текстовые поля теперь недоступны для редактирования.я передаю состояние как значение в текстовые поля, как решить эту проблему? 

static getDerivedStateFromProps(nextProps, prevState){
    return({
        email: nextProps.user && nextProps.user.hasOwnProperty("emails") ? nextProps.user.emails[0].address : prevState.email,
        password: prevState.password,
        name: nextProps.user && nextProps.user.hasOwnProperty("name") ? nextProps.user.name : prevState.name,
        mobileNumber: nextProps.user && nextProps.user.hasOwnProperty("mobileNumber") ? nextProps.user.mobileNumber : prevState.mobileNumber,
        address: nextProps.user && nextProps.user.hasOwnProperty("address") ? nextProps.user.address.text : prevState.address
    });
}

 <TextField hintText="Tu Email" onChange={this.handleInputChange}  style={{fontFamily:'Montserrat', textAlign: 'center'}}
                  name='email' value={this.state.email} type="email"
                  errorText={this.state.emailError} hintStyle={{ width:'100%', textAlign: 'center' }}
                  inputStyle={{ textAlign: 'center' }}/>
                  <div style={{paddingTop:'30px'}}></div>
                  <p>Nombre</p>
                  <TextField hintText="Tu nombre" onChange={this.handleInputChange} style={{fontFamily:'Montserrat'}} name='name' value={this.state.name}
                  errorText={this.state.nameError} hintStyle={{ width:'100%', textAlign: 'center' }}
                  inputStyle={{ textAlign: 'center' }}/>
                  <div style={{paddingTop:'30px'}}></div>
                  <p>Número de WhatsApp</p>
                  <TextField hintText="Tu número de WhatsApp" onChange={this.handleInputChange} style={{fontFamily:'Montserrat'}}
                  name='mobileNumber' value={this.state.mobileNumber} type='tel'
                  errorText={this.state.numberError} hintStyle={{ width:'100%', textAlign: 'center' }}
                  inputStyle={{ textAlign: 'center' }}/>

1 Ответ

0 голосов
/ 05 октября 2018

На самом деле поля ввода не стали недоступными для редактирования.Жизненный цикл getDerivedStateFromProps вызывается каждый раз, когда изменяется проп или состояние.

Таким образом, всякий раз, когда в поле ввода вносятся какие-либо изменения, изменяются реквизиты или состояние, и жизненный цикл getDerivedStateFromProps вызывается снова.Следовательно, сброс Textfields к начальным значениям.

Выполните условную проверку в getDerivedStateFromProps, чтобы начальные значения устанавливались только при первом вызове жизненного цикла.

Например, попробуйте что-то вроде: 

//  set initialCount to 0 in constructor 
constructor () {
    this.state = { initialCount: 0 };
}


static getDerivedStateFromProps(nextProps, prevState){
    if (prevState.initialCount === 0) {
        return({
        initialCount: prevState.initialCount + 1,
        email: nextProps.user && 
           nextProps.user.hasOwnProperty("emails") ? 
           nextProps.user.emails[0].address : prevState.email,
           password: prevState.password,
           name: nextProps.user && 
           nextProps.user.hasOwnProperty("name") ? nextProps.user.name 
           : prevState.name,
           mobileNumber: nextProps.user && 
           nextProps.user.hasOwnProperty("mobileNumber") ? 
           nextProps.user.mobileNumber : prevState.mobileNumber,
           address: nextProps.user && 
           nextProps.user.hasOwnProperty("address") ? 
           nextProps.user.address.text : prevState.address
       });
    }
}
...