undefined не является объектом (оценивается как this.state.user.avatar)

Question

Изображение ошибки

Я использую эмулятор ios и продолжаю получать эту ошибку, когда i go для запуска страницы профиля. Сначала он немного загружается, затем останавливается, и появляется сообщение об ошибке, в котором говорится, что он находится на «this.state.user.avatar», но я не могу понять, что я с ним не так? Что я делаю неправильно? если кто-то может мне помочь, это было бы здорово!

Это мой ProfileScreen. js file

import React from "react";
import {View, Text, StyleSheet, TouchableOpacity, Button, Image } from "react-native";
import Fire from '../utilities/Fire';
export default class ProfileScreen extends React.Component {

state = {
   user: {}
};

unsubscribe = null;

componentDidMount() {
    const user = this.props.uid || Fire.shared.uid

    this.unsubscribe = Fire.shared.firestore
        .collection("users")
        .doc(user)
        .onSnapshot(doc => {
            this.setState({ user: doc.data() });
        });
}

componentWillUnmount() {
    this.unsubscribe();

};

render() {

return(

    <View style={styles.container}>
        <View style = {{ MarginTop: 64, alignItems: "Center" }}>
          <View style={styles.avatarContainer}>
              <Image style={styles.avatar} source={this.state.user.avatar ? { uri: this.state.user.avatar } : require("../assets/avatar.png")}
                /> 
            </View> 
            <Text style={styles.name}>{this.state.user.name}</Text> 
        </View>  
        <View style={styles.subContainer}>
            <View style={styles.stat}>
                <Text style={styles.info}>8/10</Text>
                <Text style={styles.Title}>Rewards</Text>
            </View>
            <View style={styles.stat}>
                <Text style={styles.info}>80/100</Text>
                <Text style={styles.Title}>Badges</Text>
            </View>
        </View>
        <Button onPress={() => {Fire.shared.signOUt()}} title="Log Out" />      
    </View>

    );
}
}

const styles = StyleSheet.create({

container:{
    flex: 1,
},

avatarContainer:{
    shadowColor: "#151734",
    shadowRadius: 15,
    shadowOpacity: 0.4
},

avatar: {
    width: 136,
    height: 136,
    borderRadius: 68
},

name: {  
    marginTop: 24,
    fontSize: 16,
    fontWeight: "600"
},
subContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    margin: 32,
},

stat: {
    alignItems:"center",
},

info: {
    color: "#4F566D",
    fontSize: 18,
    fontWeight: "300"
},

Title: {
    color: "#C3C5CD",
    fontSize: 12,
    fontWeight: "500",
    marginTop: 4
}

});

---

Это мой огонь . js файл

import FirebaseKeys from '../config';
import firebase from 'firebase';

require("firebase/firestore");

class Fire{

constructor() {

    firebase.initializeApp(FirebaseKeys);
}

addPost =  async({ text, localUri }) => {
  const remoteUri = await this.uploadPhotoAsync(localUri, 'photos/${this.uid}/${Date.now()}');

  return new Promise ((res, rej) => {
      this.firestore
      .collection("posts")
      .add ({
          text,
          uid: this.uid,
          timestamp: this.timestamp,
          image: remoteUri
      })
      .then(ref => {
          res(ref);
      })
      .catch(error => {
          rej(error);
      });
  });
};

uploadPhotoAsync = async (uri, filename) => {
    return new Promise(async (res, rej) => {
        const response = await fetch(uri);
        const file = await response.blob();

        let upload = firebase
        .storage()
        .ref(filename)
        .put(file);

        upload.on(
            "state_changed",
            snapshot => {},
            err => {
                rej(err);
            },
            async () => {
                const url = await upload.snapshot.ref.getDownloadURL();
                res(url);
            }
        );
    });
};

createUser = async user => {
    let remoteUri = null

    try {
        await firebase.auth().createUserWithEmailAndPassword(user.email, user.password)

        let db = this.firestore.collection("users").doc(this.uid)

        db.set({
            name: user.name,
            email: user.email,
            avatar: null
        })

        if (user.avatar) {
            remoteUri = await this.uploadPhotoAsync(user.avatar, 'avatars/${this.uid}')

            db.set({avatar: remoteUri }, { merge: true})
        }
    } catch (error) {
        alert("Error: ", error);
    }
};

signOut = () => {
    firebase.auth().signOut();
};

get firestore(){
    return firebase.firestore();

}

get uid() {
    return (firebase.auth().currentUser || {}).uid;
}

get timestamp() {
    return Date.now();
}

}

Fire.shared = new Fire();

export default Fire;

Answer 1

Если вы хотите установить подобное состояние, вам нужно сделать это в конструкторе следующим образом:

  constructor(props) {
     super(props);
     this.state = {
        user: {}
     }
   }

Так что добавьте этот код в начало класса, и он должен фактически установить для пользователя значение пустой объект ..

В других местах приложения вы используете setState ....

Answer 2

Попробуйте изменить пользователя {} на пользователя []