State 设置 useState 不通过 props 向下传递

Question

我有一个功能组件，它使用 onSubmit function 设置 state。问题是 setState function 不会及时更新用户 state，以便在经过身份验证的 state 更改为 true 之前将其传递给用户 prop。 这是我的组件的基本要点：

import React, { useState } from 'react';
import axios from 'axios';
import { LoginForm } from './LoginForm';
import { LoggedIn } from './LoggedIn';

const { login } = require('../utils/login');
const { getUser } = require('../utils/getUser');

export const Splash = () => {
    const [user, setUser] = useState(null);
    const [authenticated, setAuthenticated] = useState(false);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const _handleEmail = (e) => {
        setEmail(e.target.value);
    };

    const _handlePass = (e) => {
        setPassword(e.target.value);
    };

    const _handleSubmit = async (e) => {
        e.preventDefault();
        const token = await login(email, password);
        const fetchUser = await getUser(token);
        setAuthenticated(true);
        setUser(fetchUser);
        console.log(fetchUser) <---- logs user fine
        console.log(user) <----- logs empty object
    };

    const _handleLogout = async (e) => {
        const logout = await 
             axios.get('http://localhost:5000/api/v1/auth/logout');
        console.log(
            `Logout status: ${logout.status}, Success: ${logout.data.success}`
        );
        setAuthenticated(false);
        setUser({});
    };

    return (
        <div>
            {!authenticated ? (
                <LoginForm
                    handleEmail={_handleEmail}
                    handlePass={_handlePass}
                    handleSubmit={_handleSubmit}
                />
            ) : (
                <LoggedIn
                    user={user}
                    authenticated={authenticated}
                    logout={_handleLogout}
                />
            )}
        </div>
    );
};

无论出于何种原因，我的 setAuthenticated function 会将经过身份验证的 state 从 false 更改为 true，从而触发<LoggedIn />的呈现，但我的user state 不会及时更新以通过用户属性传递给<LoggedIn /> 。 我怀疑我发送的经过authenticated的道具也没有更新。 想法？

谢谢！

编辑：这是我的<LoggedIn />组件，它是<LoggedInNav />组件。

/// LoggedIn.js

export const LoggedIn = ({ logout, user, authenticated }) => {
    LoggedIn.propTypes = {
        logout: PropTypes.func.isRequired,
        user: PropTypes.object.isRequired,
        authenticated: PropTypes.bool.isRequired
    };
    const [loggedInUser, setUser] = useState({});
    const [loggedInAuth, setAuthenticated] = useState(false);

    useEffect(() => {
        try {
            if (user) {
                setAuthenticated(true);
                setUser(user);
            }
        } catch (err) {
            console.log(err);
        }
    }, []);

    return (
        <div>
            {!authenticated ? (
                <Spinner animation='border' variant='primary' />
            ) : (
                <LoggedinNav navUser={user} logoutButton={logout} />
            )}
        </div>
    );
};

// LoggedInNav.js

export const LoggedinNav = ({ navUser, logoutButton }) => {
    LoggedinNav.propTypes = {
        navUser: PropTypes.object.isRequired,
        logoutButton: PropTypes.func.isRequired
    };

    return (
        <div>
            <Navbar bg='light' variant='light'>
                <Navbar.Brand href='#home'>
                    <img
                        src={logo}
                        width='120'
                        height='auto'
                        className='d-inline-block align-top ml-3'
                        alt='React Bootstrap logo'
                    />
                </Navbar.Brand>
                <Nav className='mr-auto'>
                    <Nav.Link href='#feedback'>Submit Feedback</Nav.Link>
                </Nav>
                <Navbar.Collapse className='justify-content-end mr-4'>
                    <Navbar.Text>
                        Signed in as: {navUser.name.first} {navUser.name.last} - Role:{' '}
                        {navUser.role}
                    </Navbar.Text>
                </Navbar.Collapse>
                <Button onClick={logoutButton} variant='outline-primary mr-4'>
                    Logout
                </Button>
            </Navbar>
        </div>
    );
};

Answer 1

根据React Docs ，useState 与 setState 一样，会触发新的渲染。

下一次渲染，新值将在user中。
因为您处于异步方法中，所以您处于循环之外，并且在下一行中看不到新的 state 值。

请参阅codesandbox poc ：
其中异步 function 等待 2 秒，然后设置 state。
您可以在控制台中看到在设置 state 之后触发渲染，渲染看到新的 state，但是异步方法打印旧的。

useState 和 setState 一样，是同步的，意味着它们会直接触发渲染。

对于异步工作，您可以使用useEffect