Possible Unhandled Promise Rejection undefined is not a function

Question

I am using React Native. I have already check out What is an unhandled promise rejection?, but I can't understand it at all.

When I create a component:

render(){
    const MenuComponent = (
      <MenuScreen CloseSlideMenu={this.SlideMenu.CloseSlideMenu} />
    )
    ...
}

I get the following error:

'Possible Unhandled Promise Rejection (id: 0) TypeError: undefined is not a function (evaluating '_this.OpenSlideMenu.bind(true).then(function() {}))'

this.OpenSlideMenu() is declared in the constructor().

constructor (props, context) {
  super(props, context)

  this.OpenSlideMenu = this.OpenSlideMenu.bind(true).catch(function(e){
    console.log("Promise Rejected");
  });
  this.CloseSlideMenu = this.CloseSlideMenu.bind(true).catch(function(e){
    console.log("Promise Rejected");
  });
}

this.drawer is declared in the render() method:

render () {
  const MenuComponent = (
    <MenuScreen CloseSlideMenu={this.SlideMenu.CloseSlideMenu} />
  )

  return (
    <Drawer
      ref={(ref) => this.drawer = ref}
      content={MenuComponent}
      tapToClose={true}
      openDrawerOffset={170}
      stles={drawerStyles}
      panCloseMask={0.2}
      closedDrawerOffset={-3}
      styles={drawerStyles}
      tweenHandler={(ratio) => ({
        main: { opacity: (2-ratio)/2 }
      })}>
      <GroceryScreen selectedCategory='Todos' OpenSlideMenu={this.OpenSlideMenu} />
    </Drawer>
  )
}

Could someone explain to me why I have this error? How do I fix this?

Answer 1

Couple things wrong. You're binding a boolean value as the this context of your function with .bind(true).

You're also using .catch() on the function declaration. .then() and .catch() are used on the function invocations.

Also if this is the initial declaration of the function, you are trying to .bind() to it before it is declared. You would need to declare it first.

I recommend you read about .bind() and Promise over at MDN.

Here is a little example that hopefully will help you understand these principles:

class Demo extends PureComponent {
    constructor( props ) {
        // allow the user this in constructor
        super( props );

        // set default state
        this.state = {
            text: "Awaiting data..."
        }

        // only needed if used in a callback
        this.method = this.method.bind( this );
    }

    componentDidMount() {
        // calling the method that returns a promise when component mounts
        this.method()
            .then((res) =>{
                // set state in a non-mutating way
                this.setState({text: res});
            });
    }

    // declaring a method to handle the api call
    // yours will not be named method
    method() {
        return new Promise(
            (resolve, reject) => {
                // simulating network delay of 2 seconds ( lets hope not! )
                setTimeout(() => {
                    resolve( "Data returned from promise" );
                }, 2000 );
            });
        );
    }

    render() {
        // destructure the text var from data
        const { text } = this.state;
        // return text
        return (
            <p>{ text }</p>
        );
    }
};