Блокировка кнопки на время выполнения функции?

Question

[flexpc]

Была проблема, придумал такое решение:

const [desable, setDesable] = React.useState(false);

function tap() {
    setDesable(true);
    //какой то код
    setDesable(false);

  return (
    <div className="App">
    <button disabled={desable} onClick={tap}>Считать</button>
    </div>

Вроде бы кнопка блокируется, но при этом если сделать двойной клик, то функция все равно выполниться два раза.
Как исправить?

Comments

[Алексей Уколов]

disable.

[Владислав Лысков]

не понимаю, что здесь написано, но html атрибут disabled не булев

[Алексей Уколов]

Владислав Лысков, как это не булев? Ещё как булев.
Код в целом правильный, просто setState не успевает выполниться до второго клика.

[Владислав Лысков]

Алексей Уколов, он булев, но..., я к тому, что нельзя написать disabled="true" или disabled="false",

[Алексей Уколов]

Владислав Лысков, в Реакте можно.

[Владислав Лысков]

Алексей Уколов, понял, спасибо, буду знать

[WbICHA]

Можешь хэндлер в throttle обернуть.

Answer 1

[ivan_ivanov_ivanych]

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

async function tap() {
    setDesable(true);
    //какой то код
     await new Promise((resolve) => setTimeout(resolve, 1000));
    setDesable(false);
}

В этой функции сначала выполняется первая функция изменения состояние setDisable(true), далее ожидание выполнения промиса, во время которого происходил перерендер. И далее, спустя 1000 мс, вызывается setDisable(false)

Comments

[WbICHA]

Круто. А какое это имеет отношение к проблеме автора?

[ivan_ivanov_ivanych]

WbICHA, хмм, возможно я ошибаюсь, но кажется, решает ее. Поправьте пожалуйста, если не так

[flexpc]

ivan_ivanov_ivanych, Не знаю, может вариант и колхозный, но он мне помог

[WbICHA]

ivan_ivanov_ivanych, во-первых, не решит. Во-вторых, если сдвинуть таймаут сразу после сетдизейбла, то да, это решение даже в какой-то степени будет работать, правда потом надо будет ловить фантомный баг, который почему-то воспроизводится у одного человека, а у другого нет, и всё из-за того, что на одном более мощное железо и оно успевает сделать ререндер, а у второго всё тормозит и время от времени человек оказывается быстрее.
Более того, тут ещё и задержка начала операции на довольно продолжительный срок.

Одно из правильных решений я отписал в комментах.