类型错误：未定义不是对象，本机反应

Question

I added a new state to my application to know whether the user is logged in or not, and this error shows up during the runtime now!

Before adding this, everything was great, everything was working fine, I tried looking for this error but everybody mentioned some babel-react which I don't use. As I mentioned clearing cache didn't help. I haven't upgraded react native lately, so it's not because of the update. ESLint doesn't show error at all. Main problem is with this 'isloggedin' boolean state wariable, but I don't realize what the issue may be. Any kind of advice or help would be amazing. Thank's in advance.

I've tried cleaning the cache, restarting everything

import React, { Component } from 'react';
import { View } from 'react-native';
import firebase from 'firebase';
import { Header, Button } from './components/common';
import Loginform from './components/Loginform';

class App extends Component {
    state = { isloggedin: false };
    componentWillMount() {
        firebase.initializeApp({
            apiKey: 'AIzaSyDN_m1VetpIBLji_S8Hng1zbPlNwaQTBiI',
            authDomain: 'authentication-83b93.firebaseapp.com',
            databaseURL: 'https://authentication-83b93.firebaseio.com',
            projectId: 'authentication-83b93',
            storageBucket: '',
            messagingSenderId: '863329573565',
            appId: '1:863329573565:web:08bedbdc76995c53'
          }
        );
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                this.setState({ isloggedin: true });
            } else {
                this.setState({ isloggedin: false });
            }
        });
    }
    renderContent() {
        if (this.user.isloggedin) {
            return (
                <Button>
                    Log Out
                </Button>
            )
        } else
        return <Loginform />;
    }
     render() {
        return (
        <View>
            <Header headerText="HopeSter Log In" />
            {this.renderContent()}
        </View>
        );
    }
}
export  default App;

Answer 1

You can use the state as condition in 2 ways

First,

renderContent() {
        if (this.state.isloggedin) {
            return (
                <Button>
                    Log Out
                </Button>
            )
        } else
        return <Loginform />;
    }

second,

renderContent() {
       const{isloggedin}=this.state
        if (isloggedin) {
            return (
                <Button>
                    Log Out
                </Button>
            )
        } else
        return <Loginform />;
    }

Answer 2

It looks like you are trying to take field isloggedin from the object this.user . However, there is no such object, you saved that property in the state. So it can be fixed next way:

    renderContent() {
        if (this.state.isloggedin) {
            return (
                <Button>
                    Log Out
                </Button>
            )
        } else
        return <Loginform />;
    }