Я застрял в день формы с последних двух дней.Когда я использую localhost: 3000 / app, приложение передается в качестве компонента в HOC, поэтому мы видим страницу входа в систему, затем в случае успеха видим панель инструментов, но я не понимаю, когда успех после успеха завершается неудачей с err: Invariant Violation:Превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов Пожалуйста, дайте мне знать, что я делаю это правильно?
index.js // правильно ли написаны маршруты?
<Provider store={store}>
<Switch>
<Route path="/" component={signIn}/>
<Route handler={requireAuth(App)} name="App"/>
</Switch>
</Provider>
Sigin.js
const mapStateToProps=(state)=>{
console.log("msp",state)
return{
isLoggedIn:state.signInReducer.isLoggedIn
}
}
const mapDispatchToProps={
doLoginAction:doLoginAction
}
class SignInMain extends React.Component {
constructor(props){
super(props)
this.state={
userDetails:'',
errMsg:false
}
}
componentDidMount(){
if(this.props.isLoggedIn)
this.props.history.push('/app')
}
handleInput=(name,val)=>{
this.setState((prevState)=>{
{ const userDetails=prevState.userDetails
return{userDetails:{...userDetails,[name]:val}}
}
})
}
handleSubmit=()=>{
this.props.doLoginAction(this.state.userDetails)
}
render(){
if(this.props.isLoggedIn) {
return this.props.isLoggedIn?<Redirect to="/app"/>:null
}
const { classes } = this.props;
return (
<main className={classes.main}>
<CssBaseline />
<Paper className={classes.paper}>
<Typography className={this.state.errMsg===true?classes.showErr:classes.hideErr}> Invalid Credentials</Typography>
<form className={classes.form} onSubmit={this.handleSubmit.bind(this)}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="email">Email Address</InputLabel>
<Input id="email" name="email" autoComplete="email" autoFocus onChange={(e)=>this.handleInput('email',e.target.value)} />
</FormControl>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<Input name="password" type="password" id="password" autoComplete="current-password" onChange={(e)=>this.handleInput('password',e.target.value)} />
</FormControl>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
className={classes.submit}
>
Sign in
</Button>
</form>
</Paper>
</main>
);
}
}
SignInMain.propTypes = {
classes: PropTypes.object.isRequired,
};
const SignIn=connect(mapStateToProps,mapDispatchToProps)(SignInMain)
export default withRouter(withStyles(styles)(SignIn));
requireAuth.js
import React from 'react';
import {withRouter} from 'react-router';
export default function requireAuth(Component){
class AuthenticatedComponent extends React.Component{
componentDidMount(){
console.log(Component)
this.checkAuth()
}
checkAuth=()=>{
if(!this.props.isLoggedIn){
const location=this.props.location;
const redirect=location.pathname+location.search;
this.props.router.push(`/?redirect=${redirect}`);
}
}
render(){
return this.props.isLoggedIn
?<Component {...this.props}/>
:null;
}
}
return withRouter(AuthenticatedComponent);
}
консольный журнал
action LOGIN_ACTION @ 14:08:55.700
prev state {signInReducer: {…}}
action {type: "LOGIN_ACTION", payload: {…}}
next state {signInReducer: {…}}
{email: "qsds@sdfs.com", password: "sdfsdfsdf"}
http://localhost:3000/user
{status: "200", isLoggedIn: true, msg: "successfully LoggedIn"}
{status: "200", isLoggedIn: true, msg: "successfully LoggedIn"}
{signInReducer: {…}}
signInReducer: {isLoggedIn: true}
__proto__: Object
action LOGIN_SUCCESS @ 08:42:33.989
prev state {signInReducer: {…}}
action {type: "LOGIN_SUCCESS", payload: {…}, @@redux-saga/SAGA_ACTION: true}payload: {status: "200", isLoggedIn: true, msg: "successfully LoggedIn"}type: "LOGIN_SUCCESS"@@redux-saga/SAGA_ACTION: true__proto__: Object
error Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Пожалуйста, дайте мне знать, что я поступаю правильнотам, где я иду не так, я знаю, что я делаю неправильно, тогда перенаправление при рендеринге вызывает проблему, и при этом оно не переходит в это состояние.Любая помощь приветствуется.
Я получаю следующую ошибку, если я использую push или redirect в функции рендеринга компонента signIn. Я получил следующую ошибку
Invariant Violation: Превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.
Проблема, с которой сталкиваются
1. Когда localhost: 3000, тогда он вызывает знак, который корректен, но при успехе не перенаправляет на указанную страницу
Когда localhost: 3000 / приложение, использующее HOC, requireAuth вызывает форму sigin, которая является правильной, но визуализация RequireAuth не вызывается даже после успешного входа в систему, поэтому мы вводим компонент
Может кто-нибудь? Пожалуйста, дайте мне знатькуда я иду не так?Пожалуйста, помогите