Как правильно использовать setstate в функционально компоненте для изменения булево значения?

Question

[tron21]

Всем добрый день! Делаю проект на React. при выполнении функции ( функция авторизации) мне необходимо изменить булево значение в данном коде.

const [loggedIn, setLoggedIn] = React.useState(false);

Нужно изменить так чтобы булево значение поменялось на true сразу, а не при перезагрузке страницы. Это необходимо для корректного получения информации о пользователе. ( эффект по получению информации о пользователе получаю если loggedIn = true) .

Подскажите, пожалуйста, как правильно прописать колбэк функции в этом setState чтобы выполнить мою задачу?

setLoggedIn(true);

Заранее благодарю за помощь. Документацию смотрел, но там классовые компоненты и мне было слегка непонятно решение. Извиняюсь если вопрос слишком простой.

Добавление: Да, я вспомнил про useEffect. Я поправлю код в своем приложении так как нужно чтобы это все корректно работало. Но вопрос остается прежним. Как можно добавлять колбэк функцию в setState если это функциональный компонент? Заранее спасибо!

Comments

[Simkav]

Нужно изменить так чтобы булево значение поменялось на true сразу, а не при перезагрузке страницы.

А это чем не подошло?
setLoggedIn(true);

[tron21]

Simkav, так как он асинхронный , то он не срабатывает сразу и не отображает изменения немедленно. У меня стоит такая логика при выполнении авторизации должно выполняться setLoggedIn(true); но он не изменяет это состояние сразу. А мне необходимо осуществить это сразу, чтобы useEffect увидел что поменялось значение и выполнил внутренний код сразу после авторизации. Если я правильно понял документацию и то что находил, то необходимо добавить колбэк для этого, но я не до конца понял как это сделать.

[WbICHA]

Тимофей Бережнов, так добавь loggedIn в зависимости юзЭффекта.

[tron21]

WbICHA, этот вариант не помогает. Срабатывает только при перезагрузке страницы. изначально я и делал зависимость от этого.

[tron21]

WbICHA, неправильно написал. Он помогает , но слегка не так как нужно. Я увидел в чем у меня ошибка. Я попробую просто подробней разделить логику авторизации и проверки токена. Спасибо

[Иван Дербенченко]

Тимофей Бережнов, подробнее можно? насколько я понял то по нажатии на кнопку, наверное , у вас начинается процесс авторизации, уходит запрос на сервер и после успешного выполнения запроса, нужно получить и обработать данные, и вместе с этим переключить loggedIn?

[tron21]

Иван Дербенченко, да, почти так. Дело в том что после его переключения я получаю данные пользователя которые должны отобразиться. Я ставлю зависимость в useEffect , но это не решает проблему так как, как я понимаю, useEffect нужно явное изменение состояния

[Иван Дербенченко]

Тимофей Бережнов, useEffect следит за зависимостями которые указываются после функции, но их можно и не указывать тогда useEffect будет выполняться при любом изменении состояния, и да, если есть зависимость нужно чтобы пользователь его изменил нажатием на кнопку, вводом символов в инпут, скроллом и. т.д.

можно синхронизировать запрос на сервер и приложение, для этого есть redux-thunk и redux-saga это если вы используете redux

так же можно в useEffect вызвать асинхронную функцию

useEffect(()=>{
    // условие для отправки запроса
     if(!loggedIn){
     (async()=>{
        await fetchRequest // в эту переменную войдут данные с сервера, которые в последующем можно обработать

       // после обработки, сохранением в store или локальный state можно переключить флаг
        setLoggedIn(true)
     })()
}
},[loggedIn])

// есть еще такой вариант
useEffect(()=>{
    // условие для отправки запроса
     if (!loggedIn){
     fetch('/some/url/here/',{options}).then(response=>response.json).then(response=>{
            // обработка ответа сервера
           // ........code
           // после обработки, сохранением в store или локальный state можно переключить флаг
            setLoggedIn(true)          
     })
       // после обработки, сохранением в store или локальный state можно переключить флаг
        setLoggedIn(true)
}
},[loggedIn])

но мне кажется я все равно вас не до конца понял)

[tron21]

Иван Дербенченко, да, возможно я недостаточно подробно описал проблему.)

Спасибо за советы! Попробую используя их решить проблему