0

嘿伙计们，我目前正在尝试使用钩子和 useContext 进行身份验证

我在这个文件中定义了 useContext：

import { createContext } from "react";

export const UserContext = createContext(null);

在我的路由器文件中，我以这种方式设置了 useContext：

export default function Router() {
  const [user, setUser] = useState(null);
  const value = useMemo(() => ({ user, setUser }), [user, setUser]);

  return (
    <Switch>
      <UserContext.Provider value={value}>
        <Route path="/login" component={Login} />
      ...
      </UserContext.Provider>
    </Switch>
  );
}

现在在我的登录功能中，我的 handleSubmit 出现问题，由我的表单触发（我的后端调用和获取所有工作都很好）：

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { user, setUser } = useContext(UserContext);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const obj = {
      Email: email,
      Password: password,
    };

    loginSession(obj);
    const session = await getUserData();
    setUser(session);
  };

在const session = ...我得到我的帐户数据时setUser(session)

我收到以下错误： login.js:25 Uncaught (in promise) TypeError: setUser is not a function

谁能帮我？我试图解决这个问题几个小时我读到钩子不应该在任何地方使用，但我猜一个处理提交的函数很好，对吧？

我也尝试将代码直接放在onSubmit中：

onSubmit={async (event) => {
          event.preventDefault();
          const obj = {
            Email: email,
            Password: password,
          };

          loginSession(obj);
          const session = await getUserData();
          setUser(session);
        }}
   
    Prints the same error
4

0 回答 0