"Maximum update depth exceeded" 反应和反应 cookie 错误
"Maximum update depth exceeded" error in react and react-cookie
我按照本教程使用 Redux 在 React 中实现了一个简单的登录表单:https://jslancer.com/blog/2017/04/27/a-simple-login-flow-with-react-and-redux/
一切正常,但是当我添加 cookie 时出现错误:
Warning: Cannot update during an existing state transition (such as
within render
). Render methods should be a pure function of props
and state.
还有:
Uncaught 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.
我做了一些调试,如果我从下面代码的输入中删除 onChange={e => this.setState({password: e.target.value})}
,错误就会消失。
知道为什么以下代码不起作用吗?
import { connect } from 'react-redux';
import { withCookies } from 'react-cookie'
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
}
render() {
let {username, password} = this.state;
let { cookies, allCookies, isLoginPending, isLoginSuccess, loginError} = this.props;
cookies.set('username', 'Ross', { path: '/', secure: true, httpOnly: true});
console.log(cookies.get('username'));
return (
<form name="loginForm" onSubmit={this.onSubmit}>
<div className="form-group-collection">
<div className="form-group">
<label>Username:</label>
<input type="text" name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
</div>
<div className="form-group">
<label>Password:</label>
<input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
</div>
</div>
</form>
)
}
}
const mapStateToProps = (state) => {
return {
isLoginPending: state.isLoginPending,
isLoginSuccess: state.isLoginSuccess,
loginError: state.loginError,
};
}
export default withCookies(connect(mapStateToProps, null)(LoginForm));```
我的猜测是,因为您的组件连接到 cookie HoC,然后您在 render
方法中调用 cookies.set
,所以它每次都会自我更新,从而形成无限循环。请尝试将 cookies.set
移动到 componentDidMount
。
我按照本教程使用 Redux 在 React 中实现了一个简单的登录表单:https://jslancer.com/blog/2017/04/27/a-simple-login-flow-with-react-and-redux/
一切正常,但是当我添加 cookie 时出现错误:
Warning: Cannot update during an existing state transition (such as within
render
). Render methods should be a pure function of props and state.
还有:
Uncaught 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.
我做了一些调试,如果我从下面代码的输入中删除 onChange={e => this.setState({password: e.target.value})}
,错误就会消失。
知道为什么以下代码不起作用吗?
import { connect } from 'react-redux';
import { withCookies } from 'react-cookie'
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
}
render() {
let {username, password} = this.state;
let { cookies, allCookies, isLoginPending, isLoginSuccess, loginError} = this.props;
cookies.set('username', 'Ross', { path: '/', secure: true, httpOnly: true});
console.log(cookies.get('username'));
return (
<form name="loginForm" onSubmit={this.onSubmit}>
<div className="form-group-collection">
<div className="form-group">
<label>Username:</label>
<input type="text" name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
</div>
<div className="form-group">
<label>Password:</label>
<input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
</div>
</div>
</form>
)
}
}
const mapStateToProps = (state) => {
return {
isLoginPending: state.isLoginPending,
isLoginSuccess: state.isLoginSuccess,
loginError: state.loginError,
};
}
export default withCookies(connect(mapStateToProps, null)(LoginForm));```
我的猜测是,因为您的组件连接到 cookie HoC,然后您在 render
方法中调用 cookies.set
,所以它每次都会自我更新,从而形成无限循环。请尝试将 cookies.set
移动到 componentDidMount
。