Реагировать - открыть новую вкладку один раз

Если компонент отображается. Я хочу открыть новую вкладку. (window.open(url, "_blank")?.focus();) Но (во время разработки) эта вкладка открывается дважды из-за React.StrictMode. Как я могу предотвратить многократный вызов этого без отключения StrictMode?

Мои попытки:

function MyComp() {
    useMemo(() => window.open(url, "_blank")?.focus(), []);
    return <div>...</div>;
}

(не работает (вызывается дважды))

function MyComp() {
    useEffect(() => {
        const id = setTimeout(() => window.open(url, "_blank")?.focus(), 10);
        return () => clearTimeout(id);
    });
    return <div>...</div>;
}

(работает, но не похоже на хорошее решение)

Отвечает ли это на ваш вопрос? Window.open открывает 2 одинаковых окна

— 30.03.2023 12:21

Похоже, вы имели в виду useEffect вместо useMemo.

— 30.03.2023 12:37

reactjs react-hooks

30.03.2023 12:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете создать этот пользовательский хук useEffectOnce в отдельном файле, который будет выполнять код только один раз, даже во время StrictMode:

// ./src/hooks/useEffectOnce.tsx

import { useEffect, useRef, useState } from 'react';

export const useEffectOnce = (effect: () => void | (() => void)) => {
  const effectFn = useRef<() => void | (() => void)>(effect);
  const destroyFn = useRef<void | (() => void)>();
  const effectCalled = useRef(false);
  const rendered = useRef(false);
  const [, setVal] = useState<number>(0);

  if (effectCalled.current) {
    rendered.current = true;
  }

  useEffect(() => {
    if (!effectCalled.current) {
      destroyFn.current = effectFn.current();
      effectCalled.current = true;
    }

    setVal(val => val + 1);

    return () => {
      if (!rendered.current) {
        return;
      }

      if (destroyFn.current) {
        destroyFn.current();
      }
    };
  }, []);
};

теперь вместо импорта useEffect из React импортируйте useEffectOnce из каталога, в котором вы сохранили хук, и выполните:

import { useEffectOnce } from "../hook/useEffectOnce" // <-- the path where you saved the hook

[...]

    useEffectOnce(() => {
        const id = setTimeout(() => window.open(url, "_blank")?.focus(), 10);
        return () => clearTimeout(id);
    });

30.03.2023 12:23

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

Вам просто нужно отслеживать, открывали ли вы уже новую вкладку.

function MyComp() {
    const openedNewTabRef = useRef(false);

    useEffect(() => {
        if (!openedNewTabRef?.current) {
            window.open(url, "_blank")?.focus();
            openedNewTabRef.current = true;
        }
    }, []);

    return <div>...</div>;
}

30.03.2023 12:35

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

Как передать объект формы в качестве реквизита компонентам функции React?

Хук React useEffect срабатывает только для последнего элемента списка, в чем может быть причина?

React JS — как обновить массив состояний в режиме реального времени?

Как мне увеличить i в useState?

Как добавить класс по клику и удалить тот же класс из всех остальных элементов?

Focked Apollo Provider с библиотекой тестирования React не возвращает данные

Визуализация нового компонента без замены старого при изменении состояния в Reactjs

Как отобразить все значение моего массива

React не перерисовывает мой компонент при изменении массива?

Как вы вставляете массивы в переменную состояния вложенного массива? - Реагировать

Реагировать - открыть новую вкладку один раз

Ответы 2

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

Похожие вопросы