在 React 中没有 setTimeOut 的情况下 window.postMessage 在 componentDidMount 中不起作用 [英] window.postMessage not working in componentDidMount without setTimeOut in React

问题描述

我正在研究在 React 网页和 React-native webview 之间传递数据.加载网页后，我想向移动设备上的 react-native webview 发送信号.

我想知道为什么在 React 网页上，window.postMessage() 不起作用，除非它与 setTimeout 一起使用.控制台中根本没有错误，但它必须延迟大约 500 才能工作.谁能解释一下?我更喜欢避免 setTimeout 因为它感觉不可靠.

@observerclass TalkToMobile 扩展 React.Component {@observable 消息；使成为() {返回 (<div>{信息 ?<编辑器数据={this.message}/>:空}

)}componentDidMount() {document.addEventListener('message', (e: any) => {如果(电子数据){this.message = JSON.parse(e.data);}});让有效载荷 = {};payload.command = "giveMeData";window.postMessage(JSON.stringify(payload), "*")/*setTimeout(()=>{让有效载荷 = {};payload.command = "giveMeData";window.postMessage(JSON.stringify(payload), "*")}, 500);*/}}

解决方案

在向 webview 发布消息之前，您可能需要等待它加载完毕，因此从 webview onLoad回调.请尝试以下操作:

...onWebViewLoaded() {如果(this.webview){this.webview.postMessage('');}}使成为() {返回 (<网页视图ref={webview =>{ this.webview = webview }}source={{uri: 'https://facebook.github.io/react/'}}onLoad={this.onWebViewLoaded}/>)}...

如果您想从 webview 向应用发布消息，请尝试在 componentDidUpdate 中处理它.当它被触发时，DOM 已加载，并且不需要 setTimeout

I'm working on passing data between a react webpage and a react-native webview. I want to send a signal to the react-native webview on the mobile once the webpage has been loaded.

I wonder why on the react webpage, the window.postMessage() doesn't work unless it's used with setTimeout. There's no error at all in the console, but it has to be delayed for about 500 in order to work. Can anyone explain that? I prefer avoiding setTimeout because it feels unreliable.

@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);*/
    }
}

解决方案

You probably need to wait for the webview to load before posting messages to it, so it makes sense to do it from within the webview onLoad callback. Try the following:

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

If you want to post message from webview to the app, try handling it in componentDidUpdate. By the time it gets fired the DOM is loaded and there will be no need for setTimeout

这篇关于在 React 中没有 setTimeOut 的情况下 window.postMessage 在 componentDidMount 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！