为什么 window.opener.function 在 React 页面中打印了两次？

问题描述

我有一个反应功能组件，它返回一个按钮到一个页面。单击此按钮时，会调用一个函数，该函数会打开一个新窗口并在当前窗口元素内设置一个函数。

export default function Authorizer_Spotify(props) {

  function someFunction() {
    let pop = window.open("http://localhost:3000/redirect","",'width=800,height=600');

    window.myCallback = () => {
      pop.close();
      console.log('hello');
    }
  }
  
   return (
    <div>
        <button variant="info" type="submit" onClick={someFunction}>
            click button
        </button>
    </div>
   );
}

这个新窗口是由另一个功能组件设置的页面，该组件使用以下方法从父窗口调用“myCallback()”函数：

export default function Redirect() {

    window.opener.myCallback();

    return (
      <div className="content">
        <p>Redirect Page</p>
      </div>
    );
}

所以当我在开发者工具控制台中输入“window.myCallback()”时，我应该得到一个“hello”。当我按下这个按钮时，我也应该得到一个“你好”。

出于某种原因，每当我按下按钮时，“hello”都会在控制台中打印两次，然后如果我在控制台中键入 window.myCallback()，我会返回 hello，但它在其下方显示未定义。

>

我不确定我的代码是什么导致运行两次。 window.opener.myCallback() 本身似乎没有被调用两次，而只是函数内部的代码。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）