reactjs - 如何使用带有钩子的上下文进行身份验证?
问题描述
我正在尝试context
用于处理我的应用程序中的身份验证。我遇到了问题,因为我试图在useContext
我的外部调用Context.Provider
,所以我将逻辑移动到提供程序的子组件。
现在我在子组件中TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
调用时收到一条错误消息。useContext
问题真的是从上下文或其他东西中获取值吗?
在app.js
import AuthContextProvider from "./components/context/authContext";
import RegisterRoutes from "./components/routing/registerRoutes";
function App() {
return (
<AuthContextProvider>
<Route
exact
path="/register"
render={(props) => (
<RegisterRoutes {...props} />
)}
/>
</AuthContextProvider>
)
}
在我的authContext.js
import React, { useState, useEffect, createContext } from "react";
export const AuthContext = createContext();
const AuthContextProvider = (props) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const setAuth = (boolean) => {
setIsAuthenticated(boolean);
};
//Auth API logic here//
const apiOptions = {
url: "users/is-verified",
method: "GET",
headers: {
token: localStorage.token,
},
};
async function isAuth() {
axios(apiOptions)
.then((response) => {
const resData = response.data;
resData === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
})
.catch((error) => {
console.log(error.response);
});
}
useEffect(() => {
isAuth();
}, []);
return (
<AuthContext.Provider
value={[isAuthenticated, setIsAuthenticated, setAuth]}
>
{props.children}
</AuthContext.Provider>
);
};
export default AuthContextProvider;
在我的registerRoutes.js
import React, { useContext } from "react";
import { Redirect } from "react-router-dom";
import Register from "../pages/register";
import AuthContext from "../context/authContext";
function RegisterRoutes(props) {
const [isAuthenticated, setAuth] = useContext(AuthContext);
return !isAuthenticated ? (
<Register {...props} setAuth={setAuth} />
) : (
<Redirect to="/login" />
);
}
export default RegisterRoutes;
解决方案
正如错误所说,Context.Provider
inauthContext.js
值不可迭代:
<AuthContext.Provider value={[isAuthenticated, setIsAuthenticated, setAuth]}>
传递给提供者的值需要是一个可迭代的值,在这种情况下,是一个有效的 JSON 对象,而不是您提供的数组。因此,我们将其更改为:
<AuthContext.Provider value={{isAuthenticated, setIsAuthenticated, setAuth}}>
然后更改引用registerRoutes.js
以正确使用新结构:
const [isAuthenticated, setAuth] = useContext(AuthContext);
变成
const { isAuthenticated, setAuth } = useContext(AuthContext);
瞧!您的 Context.Provider 值是可迭代的,您可以在应用程序中使用它。
推荐阅读
- c# - 当方法返回类型 IEnumerable 时,方法返回 List。但 GetType 显示为 List
- html - 输入字段宽度不受边距影响
- android-studio - 安装失败并显示消息 Failed to finalize session : INSTALL_PARSE_FAILED_NO_CERTIFICATES
- php - 如何使用来自 PhpStorm 的 .htaccess 文件?
- javascript - Hoare 快速排序算法无法正常工作
- rust - 不能在循环中多次借用可变错误
- image - 在Linux中使用file命令的输出分析图像导致Linux shell脚本错误?
- scala - 如何确定问题是否可以在 Scala 中使用尾递归解决
- javascript - Ajax 表单数据不与多个对象一起发送
- java - 比较加密的 sha512+salt 密码时出现问题