React Hooks - useState не обновляет состояния Saving, Saved сразу

Я использую React Hooks и создаю страницу, на которой пользователи могут вносить изменения в свою учетную запись и сохранять ее. Когда страница загружается, я хочу, чтобы кнопка была отключена, потому что на странице будет отображаться ранее сохраненная информация, и нет необходимости сохранять, поскольку не было сделано никаких изменений. Как только пользователь вносит изменения, у меня появляется функция validate (), которая проверяет, действительны ли внесенные им изменения. Если они есть, то кнопка должна быть активирована. Когда пользователь нажимает кнопку «Сохранить», она должна быть отключена и должно отображаться «Сохранение». После завершения сохранения кнопка все еще должна быть отключена и должна отображаться «Сохранено».

У меня есть 3 переменных состояния, которые инициализированы таким образом (сначала disableButton истинно, потому что кнопка отключена при переходе на страницу).

const [saved, setSaved] = useState(false);
const [isSubmitting, setSubmitting] = useState(false);
const [disableButton, setDisableButton] = useState(true);

Я использовал setState, когда происходят определенные события, например, когда пользователь нажимает кнопку сохранения:

const handleSubmit = async () => {
    setSaved(false);
    setSubmitting(true);
    setDisableButton(true);
...
}

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


reactjs javascript react-hooks use-state use-effect
person Sharon He    schedule 05.09.2020    source источник
comment
Не могли бы вы добавить отрывки из своего кода для обзора того, что происходит?   -  person Yassine K    schedule 05.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Все обновления состояния в React асинхронны по дизайну, чтобы попытаться объединить события вместе, вместо того, чтобы запускать рендеринг для каждого изменения.

Компонент на основе классов может реагировать на обновления состояния с помощью обратного вызова setState:

onEvent = () => {
    this.setState({ key: value }, () => {
        console.log("I'm run when the state has been updated!");
    }); 
}

Для функциональных компонентов принцип все еще применяется, хотя и по-другому:

export const SomeComponent = () => {
    const [value, setValue] = useState(false);

    useEffect(() => {
        console.log("I'm run whenever value changes!");
    }, [value]);

    function onEvent() {
        setValue(!value);
    }

    // ...
}

Вот как это устроено, поэтому вам нужно будет найти способ заставить его работать для вашего варианта использования. Не стесняйтесь добавлять более подробную информацию о вашей конкретной ситуации.

person emeraldsanto    schedule 05.09.2020
comment
Большое спасибо!! - person Sharon He; 06.09.2020