Question

106

Possible Unhandled Promise Rejection undefined is not a function

rated 0 times [ 110] [ 4] / answers: 1 / hits: 21994 / 7 Years ago, fri, july 21, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cartersinceren

Add To Favorites

Follow

Total Points: 442

Total Questions: 116

Total Answers: 106

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

answered 7 Years ago sidneyh · Accepted Answer

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>

        );

    }

};