如何解决尝试实施JWT身份验证时收到此错误,错误:超出最大更新深度
我收到此错误
错误:超出最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时,可能会发生这种情况。 React限制了嵌套更新的数量,以防止无限循环。
我试图将JWT与reduxtoolkit一起使用并做出反应,但是当我输入正确的用户名和密码时,我收到此错误。
function Login() {
const history=useHistory()
const dispatch=useDispatch()
const loginToken=useSelector(loginTokenSelector)
const {register,handleSubmit,errors}=useForm()
const onSubmit=data=>{
dispatch(createLoginToken({
username:data.username,password:data.password
}))
const isAuthenticated=localStorage.getItem('accessToken')
?true:false
if(isAuthenticated) history.push('/')
}
return (
<Container>
<form onSubmit={handleSubmit(onSubmit)}>
<LoginContainer>
<InfoCard>
<TextHeader>Dawr Manager</TextHeader>
<TextHeader>The Complete Inventory Management</TextHeader>
<TextHeader>Point of Sale</TextHeader>
<TextHeader>Software</TextHeader>
<TextHeader>CLD Technologies</TextHeader>
</InfoCard>
<LoginCard>
{console.log('access token',loginToken.access)}
{loginToken.access==='rejected'&&loginToken.access!==''?'Incorrect UserName or Password':''}
{loginToken.access!=='rejected'&&loginToken.access!==''
?localStorage.setItem('accessToken',loginToken.access):''}
{loginToken.access!=='rejected'&&loginToken.access!==''
?localStorage.setItem('refreshToken',loginToken.refresh):''}
{loginToken.access!=='rejected'&&loginToken.access!==''?history.push('/'):''}
<h1>Login</h1>
<NameField
name='username'
placeholder='User Name'
label='User Name'
error={!!errors.username}
helperText={!!errors.username?'User Name is required':''}
inputRef={register({
required:true,maxLength:100
})}
/>
<PasswordField
name='password'
type='password'
placeholder='password'
label='Password'
error={!!errors.password}
helperText={!!errors.password?'Password is required':''}
inputRef={register({
required:true,maxLength:100
})}
/>
<ButtonSection>
<Button
type='submit'
color='primary'
variant='contained'
>
Login
</Button>
<Button
color='secondary'
variant='contained'
>
Clear
</Button>
</ButtonSection>
</LoginCard>
</LoginContainer>
</form>
</Container>
解决方法
您正在调用渲染上的Submit函数。 将其包装为新功能:
<form onSubmit={() => handleSubmit(onSubmit)}>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。