javascript - 当 useContext 对象更改时反应不重新渲染

Question

我正在使用useAuth钩子进行身份验证，如此处所述。我做了一个类似的钩子，如图所示：

const AuthContext = createContext();

export function ProvideAuth({children}) {
    const auth = useProvideAuth();
    return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
}

export const useAuth = () => {
    return useContext(AuthContext);
}

function useProvideAuth() {
    const [user, setUser] = useState(null);

    console.log(user); // originally prints 'null' 
                       // after mounting and re-rendering prints USERNAME

    const login = (username, password, callback, errorcb) => {
        ...
    }

    // A small diff here
    useEffect(() => {
        axios.get(
            '/isLoggedIn/',
        ).then((response) => {
            setUser(response.data.user)
        }).catch(error => {
            setUser(null)
        })
    }, [])

    return {
        user,
        login,
    }
}

在安装时，我调用/isLoggedIn/并相应地更新状态，这应该会触发重新渲染。

但是我PrivateRoute的并没有重新渲染，所以user始终保持不变null，因此再次登陆登录页面。

function PrivateRoute({children, ...rest}) {
    const auth = useAuth();

    return (<Route {...rest}
                   render={({location}) => {
                       console.log(auth.user)
                       return auth.user ? (
                           children
                       ) : (
                           <Redirect
                               to={{
                                   pathname: '/login',
                                   state: {from: location}
                               }}
                           />
                       )
                   }}
    ></Route>)
}

我的App.js

function App() {
    return (
        <ProvideAuth>
            <Router>
                <Switch>
                    <PrivateRoute path="/builder">
                        <Builder/>
                    </PrivateRoute>
                    <Route path="/login">
                        <Login/>
                    </Route>
                </Switch>
            </Router>
        </ProvideAuth>
    )
}

标签： javascriptreactjs