Possible Unhandled Promise Rejection (id:0) TypeError: undefined is not an object

Question

I'm trying to implement login logic using redux, thunk, and navigation libraries in react native project (android) and I get unhandled promise rejection (id:0): (evalualting '_this.props.navigation') any idea whats causing this problem or way out?

class AuthLoadingScreen extends React.Component {
  constructor() {
    super();
    this._bootstrapAsync();
  }

  _bootstrapAsync = async () => {
      this.props.getUserToken().then(() => {
        this.props.navigation.navigate(this.props.token.token !== null ? Devices' : 'UserAuth');
      }).catch(err => {
          this.setState({ err })
      })

  };

  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

// actionCreator.js
export const getUserToken = () => dispatch =>
 AsyncStorage.getItem('userToken')
        .then((data) => {
            dispatch(loading(false));
            dispatch(getToken(data));
        })
        .catch((err) => {
            dispatch(loading(false));
            dispatch(error(err.message || 'ERROR'));
        })

score 1 · Accepted Answer · answered Jun 06 '19 at 08:13

1

You are calling this._bootstrapAsync() inside constructor place it in the componentDidMount

class AuthLoadingScreen extends React.Component {
  constructor() {
    super();

  }

componentDidMount() {
  this._bootstrapAsync();
}

....
}

answered Jun 06 '19 at 08:13

Kamal Pandey

1,508
1
8
12

This fixed the problem. Thank you – techyoob Jun 06 '19 at 17:18
could you please accept the answer if it works. Thanks – Kamal Pandey Jun 06 '19 at 17:21

score 1 · Answer 2 · answered Jun 06 '19 at 10:40

The action prop doesn't return a promise.

Also, I would suggest you call navigation inside the action with help for react-navigation-redux-helpers.

Use navigation in actions.

export const getUserToken = () => dispatch => {
   AsyncStorage.getItem('userToken')
        .then((data) => {
            dispatch(loading(false));
            dispatch(getToken(data));
            dispatch(NavigationActions.navigate('successRoute'))
        })
        .catch((err) => {
            dispatch(loading(false));
            dispatch(error(err.message || 'ERROR'));
            dispatch(NavigationActions.navigate('failRoute'))
        });
}

Not a good practise returning a promise to dispatch.

Would you mind explaining why is not a good practice returning a promise to dispatch?? — techyoob, Jun 06 '19 at 17:20
My personal opinion is unless you need a logic on a finish event that couldn't be done inside action scope you need a promise. Here navigation could be done with dispatch. — Naveen Vignesh, Jun 07 '19 at 16:59

Possible Unhandled Promise Rejection (id:0) TypeError: undefined is not an object

2 Answers2