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

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

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

Answer 2

[Евгений]

Не знаю, в чём у тебя проблема, но такой-же код отрабатывает нормально, причём в любых вариантах:

// fetch
import React, { useState } from 'react'

export const Button = () => {
    const [ disabled, setDisabled ] = useState(false)
    const [ data, setData ] = useState(null)
    const handleClick = () => {
        console.log('fetch')
        setDisabled(true)
        fetch('https://fakestoreapi.com/products').then(r => r.json()).then(data => {
            console.log('fetched', data)
            setDisabled(false)
            setData(data)
        })
    }
    return (
        <>
            <button type="button" onClick={ handleClick } disabled={ disabled }>
                Fetch
            </button>
            { data ? (
                <pre>{ JSON.stringify(data, null, 2) }</pre>
            ) : null }
        </>
    )
}

// timeout
import React, { useState } from 'react'

export const Button = () => {
    const [ disabled, setDisabled ] = useState(false)
    const handleClick = () => {
        console.log('timeout')
        setDisabled(true)
        setTimeout(() => {
            console.log('timed out')
            setDisabled(false)
        }, 2000)
    }
    return (
        <button type="button" onClick={ handleClick } disabled={ disabled }>
            Timeout
        </button>
    )
}

P.S. А вообще, не могу понять, почему код скинут кусками. Отправь вообще весь компонент, просто скопируй всё и поменяй в вопросе самом предыдущий код. Может у тебя ещё в чём-то дело.