Совершить действие, если состояние не обновлялось

Question

Идея такая. Если несколько чекбоксов, они записываются в состояние и далее отправляются на сервер. Что-бы избежать добавления кнопки "Сохранить" , было принято решение добавить автоматическое сохранение и отправка данных на сервер, если пользователь не меняет ничего в течении 1-2 секунд(чтобы не перегружать сервер и в частности БД запросами)

Была идея использовать componenDidUpdate + setTimeout, но вместе оно работать не хочет.

componentDidUpdate(prevProps, prevState, snapshot) {
        Settings.timer = null;
        clearTimeout(Settings.timer);
        Settings.timer = setTimeout(function() {
            console.log("1 seconds of no clicking");
            Settings.timer = null;
        }, 1000);
        
    }
    static timer = null;

Как такое можно реализовать?

Answer 1

Можно сделать такую реализацию следующим образом

Объявляем переменную в компоненте, но не в состоянии

this.timer = 0;

Создаем метод, который будет вызываться при каждом изменении состояния компонента

willUpdateDb() {
    clearTimeout(this.timer); // Сбросить таймер(если есть)
    this.timer = setTimeout(() => { // Запустить новый
        console.log('updateDB '); // - Если за 2сек ничего не поменялось, сохранится
    }, 2000);
}

componentDidUpdate(prevProps, prevState, snapshot) {
    this.willUpdateDb();
}

Когда данные не меняются, нет смысла дергать БД, данные же остались прежними.

Таким образом, сохранение данных в БД будет тогда, когда от момента последнего изменения состояния прошло 2сек(Ну или ваш нужный интервал)

БЛОГ НА HUSL

Совершить действие, если состояние не обновлялось

Ответы (1 шт):