可能未处理的承诺拒绝未定义不是一个函数

Posted 2023-02-22

【中文标题】可能未处理的承诺拒绝未定义不是一个函数

【英文标题】：Possible Unhandled Promise Rejection undefined is not a function

【发布时间】：2017-12-28 00:03:51

【问题描述】：

我正在使用 React Native。我已经查了What is an unhandled promise rejection?，但是完全看不懂。

当我创建一个组件时：

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

我收到以下错误：

'可能的未处理的 Promise Rejection (id: 0) TypeError: undefined is 不是函数（评估 '_this.OpenSlideMenu.bind(true).then(function() ))'

this.OpenSlideMenu() 在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 在 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>
  )

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

【问题讨论】：

使用调试器（在所有异常上设置 Break）查看发生了什么。

this.OpenSlideMenu 是返回承诺还是已经是承诺的方法？捕获返回承诺的方法无效，您应该仅在构造承诺后捕获。

【参考方案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>
        );
    
;

【讨论】：

谢谢凯尔！我可以问你一个问题吗？为什么我的问题被否决了？我是否需要在下次询问时进一步了解该问题？

SO 可能很苛刻。话虽如此，您的问题表明您不了解问题的许多部分，并且您可以在寻求帮助之前进行更多研究。

【参考方案2】：

由于不同的原因，我遇到了类似的错误：使用 useContext 从上下文文件中导入 aync 函数“myFunc”

我的错误：未处理的 Promiose Rejection 不是一个函数是一个承诺的实例

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

调用不带参数/变量的 myFunc 时不包括括号。 将 const output = await myFunc(); 更改为 const output = await myFunc; 为我修复了它。