Question

我有一个功能组件，它使用onSubmit函数设置状态。问题在于setState函数不会及时更新用户状态，以便在将身份验证状态更改为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函数都会将身份验证状态从false更改为true，从而触发<LoggedIn />的呈现，但是我的用户状态不会及时更新以传递给<LoggedIn />通过user道具。我怀疑我发送的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中。
因为您使用的是异步方法，所以您将退出循环，并且无法在下一行看到新的状态值。

请参见codesandbox poc：
在其中，异步功能等待2秒钟，然后设置状态。
您可以在控制台中看到，渲染在设置状态之后触发，渲染看到新状态，但是async方法将打印旧状态。

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

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

使用useState设置的状态不通过道具传递

1 个答案: