- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试为 React JS 项目进行身份验证,但出现以下错误:
Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
我正在阅读其他问题(如 this 和 this),但我想我的情况有所不同,因为我在创建组件后设置了所有 useState
。
我使用了不同的方法来完成这项工作,但它们都不适合我。
我在 ContextWrapper
组件中添加了这样的方法:
import React, { useState, useEffect } from "react";
import { useCookies } from "react-cookie";
import jwt from "jsonwebtoken";
import { fetchLogin, fetchVerify } from "../fake-server";
import Context from "./context";
export default ({ children }) => {
const [token, setToken] = useState(null);
const [message, setMessage] = useState(null);
const [loading, setLoading] = useState(false);
const [cookies, setCookie, removeCookie] = useCookies(["token"]);
useEffect(() => {
console.log(cookies);
if (cookies.token) {
setToken(cookies.token);
}
}, []);
useEffect(() => {
if (token) {
setCookie("token", JSON.stringify(token), { path: "/" });
} else {
removeCookie("token");
}
console.log(token);
}, [token]);
function login(email, password) {
fetchLogin(email, password)
/*.then(response => response.json())*/
.then(data => {
const decoded = jwt.decode(data.token);
const token = {
token: data.token,
...decoded
};
setToken(token);
})
.catch(error => {
console.log("error", error);
setMessage({
status: 500,
text: error
});
});
}
function verify() {
fetchVerify(cookies.token)
/*.then(response => response.json())*/
.then(data => {
setToken(data);
})
.catch(error => {
setToken(null);
setMessage({
status: 500,
text: error
});
});
}
function logout() {
setToken(false);
}
const value = {
login,
verify,
logout,
token,
message,
setMessage,
loading,
setLoading
};
return <Context.Provider value={value}>{children}</Context.Provider>;
};
然后这是我的 Login
组件:
import React, { useState, useContext, useEffect } from "react";
import {
Grid,
Card,
Typography,
CardActions,
CardContent,
FormControl,
TextField,
Button
} from "@material-ui/core";
import { Redirect } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import Context from "../context/context";
const useStyles = makeStyles(theme => ({
root: {
height: "100vh",
display: "flex",
justifyContent: "center",
alignContent: "center"
},
title: {
marginBottom: theme.spacing(2)
},
card: {},
formControl: {
marginBottom: theme.spacing(1)
},
actions: {
display: "flex",
justifyContent: "flex-end"
}
}));
export default ({ history, location }) => {
const context = useContext(Context);
const classes = useStyles();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
if (context.token) {
return <Redirect to="/" />;
}
useEffect(() => {
context.setLoading(false);
}, []);
function onSubmit(e) {
e.preventDefault();
context.login(email, password);
}
return (
<Grid container className={classes.root}>
<Card className={classes.card}>
<form onSubmit={onSubmit}>
<CardContent>
<Typography variant="h4" className={classes.title}>
Login
</Typography>
<FormControl className={classes.formControl} fullWidth>
<TextField
type="text"
variant="outlined"
label="Email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
</FormControl>
<FormControl className={classes.formControl} fullWidth>
<TextField
type="password"
variant="outlined"
label="Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
</FormControl>
</CardContent>
<CardActions className={classes.actions}>
<Button type="submit" variant="contained" color="secondary">
Login
</Button>
</CardActions>
</form>
</Card>
</Grid>
);
};
这里我创建了this sandbox重现触发 login()
方法时发生的错误。那么,我做错了什么?
最佳答案
将您的条件移动到 useEffect
下。
useEffect(() => {})
if (context.token) {
return <Redirect to="/" />;
}
因为您的 if
条件影响了它下面的后续 Hook ,因为如果 context.token
为真,它就不会运行。这违反了 Rules of Hooks .
专业提示:按照 React-Docs 中的建议添加 ESlint 插件,以便在您编码时获得这些警告/错误。
关于javascript - React JS : Rendered fewer hooks than expected. 这可能是意外提前返回语句导致的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59899419/
这很可能是我的语法错误,因为我对在 C++ 中使用多个文件和结构(特别是将结构传递给函数)还很陌生。这是三个文件: 主要.cpp: #include #include #include #inc
我有 TypeScript NestJS 项目。 我需要验证传入的 DTO 到我的 API。它可以被描述为“创建项目”,其中我们有建筑类型(房屋、公寓、花园),并根据该类型我们需要定义: 房屋:楼层包
是否可以从可用于泛型参数的可能类型集中排除特定类型?如果是如何。 例如 Foo() : where T != bool 将意味着除了类型 bool 之外的任何类型。 编辑 为什么? 以下代码是我尝试强
我的 WebGL 体积光线转换应用程序即将完成。但是我发现了一个问题。我必须通过 2D 纹理模拟 3D 纹理。这不是问题。我正在用小切片创建一个巨大的纹理。巨大纹理的尺寸约为 4096x4096 像素
我正在处理的网页上显示了一个返回顶部按钮。当您向下滚动时,有时单击它时,它会跳到顶部,然后跳回您在页面上的位置,然后像预期的那样平滑滚动到顶部。请记住,它并不总是这样做。这只是一个滞后或故障问题还是我
我对此还很陌生,所以请耐心等待。 我有一个类,它具有三个属性:几个整数和一个用户定义对象的集合。 public class Response { public int num1 { get;
我正在制作一款平台游戏,让玩家每 30 毫秒跳跃一次,并向上添加少量的力。我想我应该使用多线程,因为我之前已经做过一些,而且看起来很简单。无论如何,我尝试了这个: public void jump()
是否可以从可能的类型集中排除特定类型,这些类型可以在泛型参数中使用?如果是这样的话。 例如 Foo() : where T != bool 表示除 bool 类型之外的任何类型。 编辑 为什么? 以下
我正在尝试在单个查询中实现内部和外部联接,我不确定我的做法是正确还是错误,因为我不太擅长查询。 就这样吧。 我有以下表格。 hrs_residentials hrs_residential_utili
关于 my website ,有一段代码可以向页面添加几个元素。这段代码不是我可以编辑的东西,而且我对它放置这些元素的位置不满意,因为它弄乱了我的一些布局。所以我想出了一个小的 jQuery 来将它们
一位客户希望我创建一个数据集,如下所示。我不知道这是否可能或合乎逻辑。 我有表parent: id name ------- ------- 1 parent1 2
这可能吗?google 好像没有这方面的资料.. 这样,如果用户在另一个网站上播放视频或歌曲,我的音量就会自动减小 最佳答案 不,这是不可能的。 如果可能的话,它必须是特定于浏览器的,但我不认为这种情
所以我正在尝试制作响应式页面。问题是为什么它归结为移动数据需要位于列表中。 我会用一些示例代码来解释 所以这可能是桌面上的输出 option1
当您将鼠标悬停在a 元素 上时,是否可以删除url? 这就是我的意思: 最佳答案 一种选择是使用一些 JavaScript。 删除 href=来自 的属性标签,取而代之的是 onclick=...
我已经考虑了几个小时,但我无法取得太大进展。它是这样的: You have an array of size n and q queries. Each query is of the form (l
我一直在尝试编写一个脚本来强化 android。我没有成功! 我正在通过模拟器运行一个 AVD,并且已经用我加载的 android shell 和 bash shell 试过了。正如您将在下面看到的那
Private Sub Workbook_Open() Dim WBname As String WBname = ThisWorkbook.name If Not InStr(WBname, "te
Spark 2.0.0-预览版 我们有一个应用程序使用了相当大的广播变量。我们在大型 EC2 实例上运行它,因此部署处于客户端模式。广播变量是一个巨大的 Map[String, Array[Strin
我正在尝试从此link中提取摘要。但是,我无法仅提取摘要的内容。到目前为止,这是我完成的工作: url <- "http://www.scielo.br/scielo.php?script=sci_a
我的主页中有一个iframe。 iframe页面中有一个modalpopup。因此,当显示modalpopup时,modalpopup的父级是iframe主体和主页父级主体。因此,覆盖层仅覆盖ifra
我是一名优秀的程序员,十分优秀!