Window.location.href не перенаправляется на внешний URL-адрес внутри метода ожидания

У меня есть функция, как показано ниже

const redirect = async ()  => {
    await aFunc().then(async () => {
        await bFunc().then((externalUrl) => {
            window.location.href = externalUrl;
        });
    });
}

Из компонента реакции, вызывающего эту функцию, как показано ниже

<Button onClick = { async() => { await redirect(); }}></Button>

Когда я отлаживал этот код, я заметил, что когда он выполняет строку «window.location.href», он не перенаправляется на внешний URL-адрес, а просто перезагружает страницу.

Вы проверили значение externalUrl перед перенаправлением?

Teemu 11.11.2022 07:28

@Teemu да, я получаю там ценность

Sritam Jagadev 11.11.2022 07:29

Это звучит как ожидающая отправка формы, просто не знаю, как ее можно ожидать, обычно отправка прерывает асинхронные действия.

Teemu 11.11.2022 07:30

Поделиться дополнительной информацией

Moein Moeinnia 15.11.2022 11:58
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
4
246
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь (externalUrl) = { ... } нужно заменить на стрелку, например,

   await bFunc().then((externalUrl) => {
        window.location.href = externalUrl;
    });

Кроме того, я включил как aFunc, так и bFunc с обещанием, разрешенным внутри него с помощью setTimeout.

Итак, здесь функция перенаправления выполняет перенаправление window.location.href на externalUrl после разрешения.

Рабочий фрагмент:

const App = () => {

  const aFunc = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("resolved");
      }, 500);
    });
  }

  const bFunc = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("https://stackoverflow.com");
      }, 500);
    });
  }

  const redirect = async () => {
    await aFunc().then(async () => {
      await bFunc().then((externalUrl) => {
        if (externalUrl) {
         window.location.href = externalUrl;
        }
      });
    });
  };

  return (
    <div>
      <button
        onClick = {async () => {
          await redirect();
        }}
      >
        Click Here
      </button>
    </div>
  );
};

// Render it
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<script src = "https://unpkg.com/@babel/standalone@7/babel.min.js"></script>

Кодыпесочницы:

Добавление setTimeOut решило проблему

Sritam Jagadev 15.11.2022 15:10

Другие вопросы по теме