Почему стейт затирается?

Question

[DonorOfLove]

Я пытаюсь реализовать инпут для ввода имени в модальном окне и сталкнулся с проблемой, что при обновлении страницы стейт не сохраняется в локал стор, а приходит в начальное состояние. Код прилагаю:

const [user, setUser] = useState({
        firstVisit: true,
        name: '',
        modalVision: true,
        modalText: 'something went wrong :,(' ,
    })

   useEffect(() => {
        setUser(JSON.parse(localStorage.getItem('user')))
            if (user.firstVisit) { 
                setUserName() // ЕСЛИ НЕ ВЫЗЫВАТЬ ЭТУ ФУНКЦИЮ, ТО ВСЕ РАБОТАЕТ КОРРЕКТНО 
            }
    }, [])

 useEffect(() => {
        window.addEventListener("unload", () => {
            localStorage.setItem('user', JSON.stringify(user))
        })
    })

function setUserName() {
        setUser({
            ...user, modalVision: true, modalText: <input onKeyPress={(e) => {
                if (e.key === 'Enter') {
                    setUser({...user, firstVisit: false, modalVision: false, name: e.target.value})
                }
            }}/>
        })
    }

Пробовал реализовать логику в самом модальном окне, а так же с помощью колбеков и тайм-аутов - результат тот же, полагаю, это происходит из-за вложенных вызовов setState, помогите разобраться.

Answer 1

[Kentavr16]

Проблема виникає не через виклики setState. Здається вам потрібно ознайомитись з цією частиною документації. І функцію setUser простіше переписати повністю. Зроби з цієї функції окремий компонент, який буде рендерити модалку. І в рендері батьківської функції використай тернарний оператор. Щось накшталт

{(!user.firstVisit?<SetUser/>:null)}

Адже вся ідея реакта полягає в розбитті коду на невеликі компоненти.