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?

Use the debugger (set Break on all exceptions) to see what is happening. — SLaks, Jul 21 '17 at 20:21
Is `this.OpenSlideMenu` a method returning a promise or already a promise ? catching a method that returns a promise have no effect, you should only catch once the promise have been constructed. — T4rk1n, Jul 21 '17 at 20:26

Kyle Richardson · Accepted Answer · 2018-05-07T02:16:29.970

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>
        );
    }
};

Thanks Kyle! Can I ask you a question? Why was my question downvoted? Do I need to develop more about the problem next time asking? — Michael, Jul 21 '17 at 20:43
SO can be harsh. That being said, your question shows you do not understand many parts of the question and that you could have done more research before asking for help. — Kyle Richardson, Jul 21 '17 at 20:46

score 0 · Answer 2 · edited Jul 31 '23 at 11:05

I was getting a similar error for a different reason: importing an async function "myFunc" from a Context file using useContext.

My error: Unhandled Promise Rejection is not a function is an instance of a promise.

const {
    state: { some, stuff }, myFunc,
} = useContext(SomeContext);

when calling "myFunc" which took no params/variables, do not include parentheses. Changing const output = await myFunc(); to const output = await myFunc; fixed it for me.

Possible Unhandled Promise Rejection undefined is not a function

2 Answers2