Undefined is not an object at this.state inside singleton - react-native

Question

I'm fairly new at ReactNative. I have a singleton like this:
export default class Locker extends Component {
static data = Locker.data == null ? new Locker() : this.data;
constructor(props) {
super(props);
this.setState ({ username: "" });
AsyncStorage.getItem('username', (error, result) => {
if (result) { this.setState({ username: result }); }
});
this.getUsername = this.getUsername.bind(this);
this.setUsername = this.setUsername.bind(this);
}
getUsername = () => {
return this.state.username;
}
setUsername = (value) => {
AsyncStorage.setItem('username', value);
this.setState({ username: value });
}
}
And this is my main app:
export default class Home extends Component {
constructor(props) {
super(props);
this.showAlert = this.showAlert.bind(this);
}
showAlert() {
Alert.alert(
'This is an alert',
'Your saved username is ' + Locker.data.getUsername(),
[
{text: 'OK', onPress: console.log("Done")},
],
{cancelable: false},
);
}
render() {
return(
<View style={{ span: 1, backgroundColor: "white" }}>
<Button title="Press me" onPress={ () => this.showAlert() }/>
</View>
);
}
}
When I run the app, I see a button on the screen as expected. When I tap on the button, I get error undefined is not an object (evaluating '_this.state.username').
Why? I read somewhere that this may be because of .bind(this) and arrow function. That's why I add .bind(this) and arrow function everywhere. But still not solve the problem. This problem does not arise if I access state on the Home main class methods.

Answer 1

it is not a good idea to use setState() on the constructor, because react-native will render the component and its children (and this is not a proper thing to do in constructor because the component has not been rendered)
just initiate the state with this.state = {username: ""};

Answer 2

i think it is because of you did not define :
this.state = {
username: ""
}
in the constructor method ,replace it just after super(props)

Answer 3

Use this.state = {username: ""}instead of this.setState ({username: ""}) in constructor.
You don't need bind(this) if you use arrow functions

Answer 4

In your Locker class constructor just replace this code
from
constructor(props) {
super(props);
this.setState ({ username: "" });
AsyncStorage.getItem('username', (error, result) => {
if (result) { this.setState({ username: result }); }
});
this.getUsername = this.getUsername.bind(this);
this.setUsername = this.setUsername.bind(this);
}
to
constructor(props) {
super(props);
this.state={ username: "" };
AsyncStorage.getItem('username', (error, result) => {
if (result) { this.setState({ username: result }); }
});
this.getUsername = this.getUsername.bind(this);
this.setUsername = this.setUsername.bind(this);
}
Just need to replace this.state = { username: "" }