Question

我正在使用React Native。我已经查看了What is Unhandled Promise Rejection，但我根本无法理解。

创建组件时：

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

我收到以下错误：

＆＃39;可能未处理的Promise拒绝（id：0）TypeError：undefined is 不是一个功能（评估＆＃39; _this.OpenSlideMenu.bind（true）.then（function（）{}））＆＃39;

this.OpenSlideMenu（）在构造函数（）中声明。

构造函数（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在render（）方法中声明：

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

有人可以向我解释为什么会出现此错误吗？我该如何解决这个问题？

Answer 1

错误的事情。您使用this将布尔值绑定为函数的.bind(true)上下文。

您还在函数声明中使用.catch()。 .then()和.catch()用于函数调用。

此外，如果这是函数的初始声明，则在声明函数之前尝试.bind()。你需要先声明它。

我建议您在MDN上阅读.bind()和Promise。

这是一个小例子，希望能帮助你理解这些原则：

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

可能未处理的Promise Rejection undefined不是一个函数

1 个答案: