Предотвратить множественные вызовы ax ios в React - PullRequest
Новая
       2

Предотвратить множественные вызовы ax ios в React

0 голосов
/ 10 января 2020

У меня есть следующие 2 метода, где publishBuild вызывается при нажатии кнопки: 

publishBuild () {
     var stateCopy = Object.assign({}, this.state)
     stateCopy.errors = []
     this.postBuild(stateCopy);
 }

async postBuild(stateCopy) {
    try {
        await axios({
            method: 'post',
            url: '/build',
            data: {
                title: stateCopy.title,
                description: DOMPurify.sanitize(this.converter.makeHtml(stateCopy.value)),
                type: stateCopy.type === 'public' ? 0 : 1,
                mode: stateCopy.mode,
                tags: "testtag",
                profession: stateCopy.selectedClass.id,
                encryption: stateCopy.encryption
            }
        })
        .then(response => {
            window.location.href = response.data.redirect_link
        })
        .catch(errors => {
            if (errors.response.data.title !== undefined) {
                stateCopy.errors.push(errors.response.data.title[0])
            }
            if (errors.response.data.description !== undefined) {
                stateCopy.errors.push(errors.response.data.description[0])
            }
            if (errors.response.data.type !== undefined) {
                stateCopy.errors.push(errors.response.data.type[0])
            }
            if (errors.response.data.mode !== undefined) {
                stateCopy.errors.push(errors.response.data.mode[0])
            }
            if (errors.response.data.tags !== undefined) {
                stateCopy.errors.push(errors.response.data.tags[0])
            }
            if (errors.response.data.profession !== undefined) {
                stateCopy.errors.push(errors.response.data.profession[0])
            }
            if (errors.response.data.encryption !== undefined) {
                stateCopy.errors.push(errors.response.data.encryption[0])
            }
        });
        this.setState(stateCopy)
    } catch (e) {
        console.log(e);
    }
}

Код работает очень хорошо, и данные передаются в URL. Проблема, однако, если пользователь нажимает на кнопку более одного раза, это вызовет несколько вызовов. Поэтому, если в моем случае пользователь нажимает кнопку 5 раз, он фактически создает 5 разных страниц с одинаковым содержанием. Как лучше всего это предотвратить?

1 Ответ

1 голос
/ 10 января 2020

Взгляните на дебусинг. Это именно то, что вы хотите.

С помощью debouncing вы установите задержку. Деблокирование позволит мгновенно выполнить первый щелчок на go, но игнорирует любые дополнительные щелчки, пока не истечет период задержки.

Преимущество в том, что кнопка остается работоспособной (поэтому она не отключена, если вам понадобится ее использовать позже), но она предотвратит повторное нажатие кнопки несколько раз подряд.

Популярный способ получить доступ к функции debounce - использовать underscore.js. Если вы выбрали подчеркивание, ваш код будет выглядеть так: 

const sendRequest = _.debounce(() => {
 // Code to send request
}, delayInMs);

Или в вашем случае: 

const sendRequest = _.debounce(publishBuild, delayInMs);

Тогда на вашей кнопке вы вызовете функцию sendRequest onClick, как: 

<button onClick={sendRequest}>Send request</button>
...