未解決のプロミス拒否未定義は関数ではありません

Question

私はReact Nativeを使用しています。私はすでにWhat is Unhandled Promise Rejectionをチェックしていますが、私はそれを全く理解できません。

私はコンポーネントを作成する場合：

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

を私は次のエラーを取得：

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

this.OpenSlideMenuは、（）（）コンストラクタで宣言されています。

コンストラクタ（小道具、コンテキスト）{ スーパー（小道具、コンテキスト）

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

カップルが間違っています。あなたは.bind(true)の関数のthisコンテキストとしてブール値をバインドしています。

また、関数宣言で.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(Object.assign(this.state, { 
        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> 
     ); 
    } 
};