如何设置defaultValue，value = {this.state.name}，并使用React更新文本输入的值？

Question

我正在尝试使用React native和expo制作一个小型应用，似乎在设置和更新文本字段时遇到障碍。我有配置文件组件，我想在Firebase的文本字段中设置名称值。然后，当用户按下更新按钮时，它将打开一个模式，我应该输入一个新名称，我也想更新该名称。 但是我无法从firebase中获得这些数据。

这是用户个人资料组件：

//thats the modal component that will handle the update
import UserDetails from '../src/components/userDetails'

//this func to send data to the modal component, but it didn't work!
handleUpdate  = (id, nom, prenom, address) => {
      this.setState(
        {
          id:id,
          nom: nom,
          prenom: prenom,
          address: address,
        }
      )
    }
//componentWillMount is to get data from firebase, but it didn't work!
/*when i want to open the profile component it shows me this error: "TypeError:undefined is not an object (evaluating 'l.nom')", that error is exactly in componentWillMount, when i remove this function, i can see my components but i can't get the data to firebase*/
    componentWillMount(props) {
      const { user } = this.props ;
      this.setState(
        {
          nom: user.nom,
          prenom: user.prenom,
          address: user.address,
        }
      )
    }

  render() {

    const { user } = this.props.user ;
    const update = user
      ? <UserDetails style={styles.modal} handleUpdate={this.handleUpdate(user.id, user.nom, user.prenom, user.address)} />
      : <UserDetails style={styles.modal} />;

    return (
              <Block style={styles.profileTexts}>
                <Text color="white" size={28} style={{ paddingBottom: 8 }}>{this.state.prenom}</Text>
                    <Text color="white" size={16} muted style={styles.seller}>{this.state.nom}</Text>
                    <Text size={16} color={'#FF9800'}>
                      4.8 
                    </Text>
                    <Text color={theme.COLORS.MUTED} size={16}>

                      {`  `} {this.state.address}
                      </Text>
                  </Block>
//this block will open the modal
              <Block row space="between" style={{ flexWrap: 'wrap' }} 
                {update}
              </Block>
            </Block>     ) ;
const mapStateToProps = (state) => {
  console.log(state);
  return{
    auth: state.firebase.auth,
    user: state.firebase.ordered.Users
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    signOut: () => dispatch(signOut())
  }
}
export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   firestoreConnect([
       { collection: 'Users'},
   ]))(Profile)

这是模态组件（userDetails）：

//thats the action component that will send data to firebase
import updateUser from '../actions/userAction';
saveUpdate=()=>{
    this.props.updateUser({
      nom: this.state.nom,
      prenom: this.state.prenom,
      address: this.state.address,
      id: this.state.id
    })
    this.setState({
      nom: "",
      prenom: "",
      address: "",
    }) 
    console.log("state after save update : ", state) 
  }

  render() {

    return (
      <View style={styles.container}>                 
                  <TextInput
                    editable = {true}
                    maxLength = {40}
                    onChangeText={(text) => this.setState({nom: text})}
                    value={this.state.nom}
                    placeholder={"Nom"}
                  />
                   <TextInput
                    editable = {true}
                    maxLength = {40}
                    onChangeText={(text) => this.setState({prenom: text})}
                    placeholder={"Prénom"}
                    value={this.state.prenom}
                  />
                   <TextInput
                    editable = {true}
                    maxLength = {40}
                    onChangeText={(text) => this.setState({address: text})}
                    placeholder={'Address'}
                    value={this.state.address}
                  />

              </View>

              <TouchableHighlight  
                style={styles.button}
                onPress={() => { this.saveUpdate }}>
                <Text style={styles.buttonTitle} >Save</Text>
              </TouchableHighlight>
)}

const mapStateToProps = (state) => {
 return {
   users: state.firestore.ordered.Users 
 }
}

export default compose(
   connect(mapStateToProps, {updateUser}),
   firestoreConnect([
       { collection: 'Users'},
   ]))(UserDetails);

我感谢任何建议。