Блог

Это известное поведение реакции, когда код выполняется дважды.

Тем не менее, я создаю конструктор форм, в котором мне нужно иметь возможность присваивать каждой вводимой форме динамический идентификатор и использовать этот идентификатор для множества других целей позже. Вот простой код ввода:

 const Text = ({placeholder}) => {
    const [id, setId] = useState(Math.random());

    eventEmitter.on('global-event', () => {
       var field = document.querySelector(`#${id}`); // here, id is changed
    });
}
 

Но поскольку Math.random() это побочный эффект, он вызывается дважды, и я не могу создавать динамические идентификаторы для полей моей формы.

Причину, по которой я это использую document.querySelector , можно прочитать здесь.

Мой вопрос в том, как я могу создавать согласованные динамические идентификаторы для своих входных данных?

Похоже, вы думаете, что useState(Math.random()); это побочный эффект, вызывающий проблему, но дважды вызываются только переданные функции useState .

Я думаю, что проблема, с которой вы столкнулись, заключается в том, что eventEmitter.on вызов является непреднамеренным побочным эффектом, поскольку тело компонента функции также вызывается дважды.

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

• Компонент класса constructor , render , и shouldComponentUpdate методы
• Статический getDerivedStateFromProps метод компонента класса
• Тела функциональных компонентов
• Функции обновления состояния (первый аргумент setState )
• Функции, переданные useState , useMemo , или useReducer

Чтобы исправить это, я считаю, что вы должны поместить eventEmitter.on логику в useEffect крючок с зависимостью от id состояния. Вы также, вероятно, должны использовать id значения, которые гарантируют гораздо большую уникальность. Не забудьте вернуть функцию очистки из эффекта, чтобы удалить все активные «прослушиватели» событий, либо при id обновлении, либо при отключении компонента. Это должно помочь устранить любые утечки ресурсов (память, сокеты и т. Д.).

Пример:

 import { v4 as uuidV4 } from 'uuid';

const Text = ({placeholder}) => {
  const [id, setId] = useState(uuidV4());

  useEffect(() => {
    const handler = () => {
      let field = document.querySelector(`#${id}`);
    };

    eventEmitter.on('global-event', handler);

    return () => {
      eventEmitter.removeListener('global-event', handler);
    };
  }, [id]);

  ...
}