window.postMessageがcomponentDidMountで動作しないsetTimeOutなしで反応します

Question

私は反応Webページと反応ネイティブWebviewの間でデータを渡しています。私は、Webページが読み込まれたら、モバイル上の反応したネイティブのWebviewに信号を送りたいと思う。

setTimeoutと一緒に使用しない限り、反応するウェブページでwindow.postMessage()が機能しないのはなぜかと思います。コンソールには何のエラーもありませんが、動作させるには約500時間遅れる必要があります。誰もそれを説明できますか？私はsetTimeoutを避けるほうが信頼できないと感じるので好きです。

@observer 
class TalkToMobile extends React.Component { 
    @observable message; 
    render() { 
     return (
      <div> 
       { 
        message ? 
         <Editor data={this.message}/>: null 
       } 
      </div> 
     ) 
    } 


    componentDidMount() { 

     document.addEventListener('message', (e: any) => { 
      if (e.data) { 
       this.message = JSON.parse(e.data); 
      } 
     }); 

     let payload = {}; 
     payload.command = "giveMeData"; 
     window.postMessage(JSON.stringify(payload), "*") 

     /* 
     setTimeout(()=>{ 
      let payload = {}; 
      payload.command = "giveMeData"; 
      window.postMessage(JSON.stringify(payload), "*") 
     }, 500);*/ 
    } 
} 

Answer 1

あなたはおそらくそれにメッセージを投稿する前にロードするためにWebViewのを待つ必要があるので、WebViewのonLoadコールバック内からそれを行うには意味があります。次のことを試してください：あなたがアプリにWebViewのからのメッセージを投稿したい場合は

... 
 
onWebViewLoaded() { 
 
    if (this.webview) { 
 
    this.webview.postMessage(''); 
 
    } 
 
} 
 

 
render() { 
 
    return (
 
    <WebView 
 
     ref={webview => { this.webview = webview }} 
 
     source={{uri: 'https://facebook.github.io/react/'}} 
 
     onLoad={this.onWebViewLoaded} 
 
    /> 
 
) 
 
} 
 
...

、componentDidUpdateでそれを処理してみてください。発火するまでにDOMがロードされ、必要はありませんsetTimeout