reactjs - 如何使用反应“获取和更新用户详细信息并将其保存在 Firebase 中”

Question

我正在创建一个小型反应本机应用程序，我想获取已存在于 firestore 的集合“用户”中的用户数据，然后我希望能够更新这些数据。但我无法获得这些数据，它总是显示“对象未定义”。

那是用户配置文件组件：

//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,
        }
      )
    }
//this func to get data from firebase, but it didn't work!
    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);

这是用户操作：

import firestore from '../config/firebase_config'

const updateUser =(user)=>{ 

  return (dispatch)=>{
      console.log("trying to update: ", user);
    firestore.firestore().collection("Users").doc(user.id)
     .update(
       {
         nom: user.nom,
         prenom: user.prenom,
         address: user.address,
       }
      )
     .then(() =>{ 
       dispatch({
         type:'UPDATE_USER',  
       })  
      })
      .catch(function(error) {
        console.error("Error updating document: ", error);
    })
 }
}
export default updateUser ;

我尝试了很多解决方案，我花了很多时间，但我无法弄清楚我在这里缺少什么。

标签： reactjsfirebasereact-nativegoogle-cloud-firestore