Блог

У меня есть функциональный компонент react, который возвращает кнопку на страницу. При нажатии на эту кнопку вызывается функция, которая открывает новое окно и устанавливает функцию внутри текущего элемента window.

 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>
    );
}
 

Поэтому, когда я набираю в окне «Консоль инструментов разработчика «.MyCallback ()», я должен получить «привет». И когда я нажимаю эту кнопку, я также должен получить «привет».

По какой-то причине всякий раз, когда я нажимаю кнопку, «привет» печатается дважды в консоли, а затем, если я набираю window.MyCallback() в консоли я получаю ответ hello, но затем под ним написано undefined.

Я не уверен, что в моем коде это выполняется дважды. Window.opener.Сам MyCallback(), похоже, вызывается не дважды, а просто код внутри функции.