Component loses data from states on reload - reactjs

Question

I am building a basic form setup, but need to grab what the user's data was before the change so they can edit from that data. On the first page load, everything works as it should, but as soon as I refresh the page (F5) I get the error: Unhandled Rejection (TypeError): Cannot read property 'userFirstName' of null. The userId is not being grabbed the second time I refresh the page. If I leave the page and go to another page and come back, it loads again as it should. How do I get the page to always re-grab the data on page refresh?
I am using React.js, Firebase, and React-router
Settings.js:
import React, { Component } from 'react';
import fire from '../../config/Fire.js';
export default class Settings extends Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.update = this.update.bind(this);
this.userDatabase = fire.database().ref().child('users');
this.state = {
userId: this.props.user.uid,
userFirstName: '',
};
}
componentWillMount(){
fire.database().ref('/users/' + this.state.userId).once('value').then(function(snapshot) {
var first_name = (snapshot.val().userFirstName);
this.setState({
userFirstName: first_name,
})
}.bind(this));
}
handleChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
}
update(e){
e.preventDefault();
//update here
fire.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then((u)=>{ this.props.history.push('/about') }).catch((error) => {
alert(error);
});
}
render() {
return (
<div className="m-container">
<h1>Hello, {this.state.userFirstName}</h1>
<hr/>
<p>Here are your settings details:</p>
<label for="first-name">First Name: </label>
<br/>
<input
value={this.state.userFirstName}
onChange={this.handleChange}
type="text"
name="first-name"
id="first-name"
placeholder={this.state.userFirstName}
/>
<br/>
<br/>
<button
type="submit"
className="m-btn"
onClick={this.signup}>Submit</button>
</div>
);
}
}
Index.js (Routing for passing in userId as props to pages):
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Home from './main/Home';
import About from './main/About';
import LoginContainer from '../components/LoginContainer';
import RegisterContainer from '../components/RegisterContainer';
import Resolved from './main/Resolved';
import Settings from './main/Settings';
export default class Routes extends Component {
render() {
return (
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
<Route path="/register" render={()=> <RegisterContainer user={this.props.user} />} />
<Route path="/login" render={()=> <LoginContainer user={this.props.user} />} />
<Route path="/resolved" exact render={()=>(
this.props.user ? (<Resolved user={this.props.user} />) :
(alert("You must log in to visit this page."), (<Redirect to="/login"/>))
)} />
<Route path="/account/settings" exact render={()=>(
this.props.user ? (<Settings user={this.props.user} />) :
(alert("You must log in to visit this page."), (<Redirect to="/login"/>))
)} />
</Switch>
);
}
};

Answer 1

you should call your firebase connection in componentDidMount, but not in the constructor. You can read the details when to use React Lifecycles. Even though it is out of date (not react 16 article), it is a a great resource. https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
class App extends React.Component {
constructor() {}
componentDidMount() {
// firebase call
// do setState
}
render() {
return <div></div>
}
}

Answer 2

Solved following: https://javebratt.com/firebase-user-undefined/
Made Asynchronous call because the uid was null for a few moment before fetching data, and error was triggered. Just had to wait for data to load before error went off. Also am grabbing the uid a new way via fire.auth().currentUser.uid.
Code I changed in Settings.js:
componentDidMount(){
// Asynchronous call fixes uid being null on reload
fire.auth().onAuthStateChanged( user => {
if (user) {
fire.database().ref('/users/' + fire.auth().currentUser.uid).once('value').then(function(snapshot) {
this.setState({
userFirstName: (snapshot.val().userFirstName),
userLastName: (snapshot.val().userLastName),
userEmail: (snapshot.val().userEmail),
userPhone: (snapshot.val().userPhone),
userAddress: (snapshot.val().userAddress),
userZip: (snapshot.val().userZip),
userProfilePicUrl: (snapshot.val().userProfilePicUrl)
})
}.bind(this));
}
});