我创建的网站与授权。我想在主页上显示不同的图标，如果用户授权与否。但组件会使数据用户的数据发生变化。
对于授权，我使用react context。

export const UserProvider = ({children}) =>{
    const [user, setUser] = useState(getObjectCookie('user') === undefined ? null : getObjectCookie('user'))

    const signIn = async ({email, password}) =>{
        return await fetch('http://localhost:5000/user/add', {
            method: 'POST',
            body: JSON.stringify({
                email: email,
                password: password
            }),
            headers: {
                "Content-type": "application/json; charset=UTF-8"
            }
        })
            .then(res => res.json())
            .then(resultData => {
                console.log(resultData.message);
                const userData = resultData.createdUser
                setObjectCookie('user', {id: userData._id, email: userData.email}, {expires: new Date(2030, 1)})
                console.log('User\'s cookie set');
            })
            .catch(error => {
                console.log(error.message)
                return Promise.reject(error)
            })
    }
}

为了检查图标的用途，我检查了渲染html中的用户授权

<div className="d-flex flex-pow btn-header">
    <div className=" d-flex flex-column center-elements">
        <a href="/profile">
        {user !== null ?
           <>
               <img src={require("../assets/icons/icon-profile.png")} alt="Вход" className="log-in" />
               <p>Вход</p>
           </> :
           <>
               <img src={equire("../assets/icons/header-entry.png")} alt="Вход" className="log-in" />
               <p>Вход</p>
           </>
                                
        }
        </a>
    </div>
</div>

如果用户无身份验证则为头

如果用户身份验证为

，则标头
但当我注册图标不改变。我的日志路径的行动和你如何可以看到头呈现之前，用户数据的变化。我不知道该怎么补救。

注册按钮功能

const registerUser = async (e) =>{
        e.preventDefault()
        await signIn(formData)
            .then(res => {
                console.log('Its redirect');
                navigate('/')
            })
            .catch(error => console.log('SignIN error'))
    }

ReactContext中的Auth函数

const signIn = async ({email, password}) =>{
        return await fetch('http://localhost:5000/user/add', {
            method: 'POST',
            body: JSON.stringify({
                email: email,
                password: password
            }),
            headers: {
                "Content-type": "application/json; charset=UTF-8"
            }
        })
            .then(res => res.json())
            .then(resultData => {
                console.log(resultData.message);
                const userData = resultData.createdUser
                setObjectCookie('user', {id: userData._id, email: userData.email}, {expires: new Date(2030, 1)})
                console.log('User\'s cookie set');
            })
            .catch(error => {
                console.log(error.message)
                return Promise.reject(error)
            })
    }

我尝试useState和useEffect。

const [profileIcon, setProfileIcon] = useState(user !== null ? '../assets/icons/icon-profile.png' : '../assets/icons/header-entry.png')   
    const [profileLabel, setProfileLabel] = useState(user !== null ? 'Профиль' : 'Вход')   

    console.log('Header render');

    useEffect(() =>{
        if (user !== null){
            setProfileIcon('../assets/icons/icon-profile.png')
            setProfileLabel('Профиль')
        } else{
            setProfileIcon('../assets/icons/header-entry.png')
            setProfileLabel('Вход')
        }
    }, [user])

    const undottedUL = {
        "listStyleType": "none"
    }