React(Hooks)：必须手动刷新页面才能看到用户答案

【问题标题】：React(Hooks): Have to manually refresh page to see userReact(Hooks)：必须手动刷新页面才能看到用户
【发布时间】：2021-04-17 06:04:50
【问题描述】：

所以我一直在为这个问题挠头。当我登录时，不会立即显示用户，即使用户成功登录，我仍然可以看到登录和注册，但是当我手动刷新页面时，会显示用户和注销，并且一切正常。我做错了什么？

const NavBar = (props) => {
    const { user, setUser } = useContext(AuthContext);

    useEffect(
        () => {
            const config = {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${localStorage.getItem('authToken')}`
                }
            };

            fetch(`${process.env.REACT_APP_BACKEND}/api/private`, config)
                .then((res) => {
                    return res.json();
                })
                .then((data) => {
                    setUser(data);
                });
        },
        [ setUser ]
    );

    return (
        <nav className="navbar navbar-expand-lg navbar-dark" style={{ background: '#1F2128' }}>
            <div className="container-fluid container-lg">
                <div className="collapse navbar-collapse" id="navbarNav">   
                    {user && (
                        <ul className="navbar-nav" style={{ marginLeft: 'auto' }}>
                            <li className="nav-item">
                                <Link className="nav-link" aria-current="page" to="/private">
                                    {user.email}
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" aria-current="page" to="/logout">
                                    Logout
                                </Link>
                            </li>
                        </ul>
                    )}
                    {!user && (
                        <ul className="navbar-nav" style={{ marginLeft: 'auto' }}>
                            <li className="nav-item">
                                <Link className="nav-link" aria-current="page" to="/login">
                                    Login
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/signup">
                                    Sign up
                                </Link>
                            </li>
                        </ul>
                    )}
                </div>
            </div>
        </nav>
    );
};

export default NavBar;

默认情况下，我将用户设置为空。

const AuthState = (props) => {
    const [ user, setUser ] = useState(null);
    const value = useMemo(() => ({ user, setUser }), [ user, setUser ]);

    return <AuthContext.Provider value={value}>{props.children}</AuthContext.Provider>;
};

还有上下文：

import { createContext } from 'react';

const authContext = createContext();

export default authContext;

【问题讨论】：

你也可以分享一下你是如何创建AuthContext的吗？
刚刚更新了原帖。在 NavBar 和 AuthState 中，我将 authContext 导入为 AuthContext

标签： reactjs react-hooks fetch state refresh

【解决方案1】：

如果您在初始数据加载时遇到问题，请尝试更改

[ setUser ]

到

[]

如果我的回答没有帮助，我也认为 this article 可能会对您有所帮助。

【讨论】：

我一开始确实是这样做的，但遇到了同样的问题

【解决方案2】：

见Updating Context from a Nested Component

theme-context.js

// Make sure the shape of the default value passed to
// createContext matches the shape that the consumers expect!
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});

您应该为上下文提供一个与消费者预期相匹配的初始值。

const authContext = createContext({
  user: null,
  setUser: () => {},
});

【讨论】：