Question

我正在使用上下文来跟踪用户。

我已经创建了上下文：

import { createContext, useState } from "react";

export const UserContext = createContext();

export function UserProvider(props) {
    const [user, setUser] = useState(null);

    return (
        <UserContext.Provider value={{user, setUser}}>
            {props.children}
        </UserContext.Provider>
    )
}

我已经用 UserProvider 包装了我的应用程序。我有一个名为 Appbar 的组件，它显示用户是否登录。如果用户已登录，则应显示退出按钮；如果用户未登录，则应显示登录按钮。

Appbar 组件：

export default function Appbar(props) {
    const classes = useStyles();
    const {user, setUser} = useContext(UserContext);

    return (
        <AppBar className={classes.appbar} color="primary" position="static">
        <Toolbar className={classes.tab}>
        <Typography variant="h6">
            Duncc Blogs
            </Typography>
                {user ? <Button color="inherit" onClick={async () => {
                    const googleUser = signOut;
                    setUser(googleUser);
                }}>Logout</Button> : <Button color="inherit" onClick={async () => {
                        const googleUser = await signIn;
                        setUser(googleUser);
                    }} className="button">Login</Button>}
        </Toolbar>
    </AppBar>
    )
}

问题是，当用户成功登录后，我希望我的 Appbar 组件重新呈现，因此退出按钮是可见的。但这不会发生。

谁能告诉我为什么？我是否没有正确使用 Context API？

Answer 1

signIn 和 signOut 可能是返回用户或 null 的函数。你不是在调用函数，你只是在分配它们。

const updateUser = async actionType => {
    try {
        if(actionType === "signOut") {
            const googleUser = signOut();
            setUser(googleUser);
        }
        else if(actionType == "signIn"){
            const googleUser = await signIn();
            setUser(googleUser);
        } 
    }
    catch(error){...}
}
...
{user ? 
    <Button color="inherit" onClick={() => updateUser("signOut")}>
        Logout
    </Button> : 
    <Button color="inherit" onClick={() => updateUser("signIn")} className="button">
        Login
    </Button>
}

Answer 2

结果是在获取用户数据之前调用了 setUser()，导致 user 为 null，无论用户是否登录。

我只是将其更改为：

{user ? <Button color="inherit" onClick={async () => {
                    signOut().then((value) => {
                        setUser(value);
                    })
                }}>Logout</Button> : <Button color="inherit" onClick={async () => {
                        signIn().then((value)=>{
                            setUser(value)
                        })
                    }} className="button">Login</Button>}

设置用户后组件不会重新渲染

2 个答案: