Как смоделировать ошибку двойного щелчка в React - PullRequest
Новая
       62

Как смоделировать ошибку двойного щелчка в React

0 голосов
/ 08 апреля 2020

Недавно я заметил ошибку в двойном щелчке в моем коде, и после некоторого исследования я решил, что есть ошибка в следующем компоненте: 

function ActionButton(props) {
    const [disabled, setDisabled] = React.useState(false);
    return (
        <button disabled={disabled} onClick={async () => {
            // We must check that disabled == false
            setDisabled(true);
            await props.onClick();
            setDisabled(false);
        }}>
            Click
        </button>
    );
}

Этот компонент пытается предотвратить двойной щелчок для какое-то неидемпотентное действие, но оно делает это плохо, потому что в обработчике onClick нет проверки состояния disabled. Из-за этого в случае, когда событие-l oop содержит более одного события MouseClick, может быть несколько вызовов функции props.onClick.

Теперь я хочу воспроизвести эту ошибку, но это не так Мне легко, потому что я не понимаю, как создать ситуацию, когда событие l oop содержит много MouseClick событий.

Я попытался воспроизвести ошибку с помощью следующего кода, но по некоторым причинам (которые я не понимаю) это не работает: 

for (let i = 0; i < 2; i++) {
    document.getElementsByTagName('button')[0].dispatchEvent(new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  }));
}

Итак, у меня есть следующее вопросы:

  1. Правда ли, что этот компонент действительно не предотвращает двойной щелчок, или мое объяснение неверно, и у React есть некоторые гарантии, которые изначально предотвращают эту ошибку в моем примере?
  2. Как я могу воспроизвести ошибку с помощью программно созданных событий?
  3. Как я могу вручную воспроизвести ошибку? Есть ли в браузере какие-либо инструменты / расширения, которые могут помочь воспроизвести подобные ошибки? Например, регулирование сети очень полезно для тестирования другого типа гонок данных в локальной среде.
...