Question

我在流星上使用reactjs 当前，我有一个表单，它是用户信息更新，我使用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' }}/>

Answer 1

实际上，输入字段并非不可编辑。每当更改属性或状态时，都会调用 getDerivedStateFromProps 生命周期。

因此，每当对 Inputfield 进行任何更改时，道具或状态都会发生更改，并再次调用 getDerivedStateFromProps 生命周期。因此，将文本字段重置为初始值。

在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
       });
    }
}

getderivedstate函数使状态不可编辑

1 个答案: