react和react-cookie中的“超出最大更新深度”错误答案

【问题标题】："Maximum update depth exceeded" error in react and react-cookiereact和react-cookie中的“超出最大更新深度”错误
【发布时间】：2019-09-22 00:31:15
【问题描述】：

我按照本教程在 React 中使用 Redux 实现了一个简单的登录表单：https://jslancer.com/blog/2017/04/27/a-simple-login-flow-with-react-and-redux/

一切正常，但是当我添加 cookie 时出现错误：

警告：在现有状态转换期间无法更新（例如在render) 内。渲染方法应该是 props 的纯函数和状态。

还有：

未捕获的不变违规：超出最大更新深度。这个可以当组件在内部重复调用 setState 时发生 componentWillUpdate 或 componentDidUpdate。 React 限制数量嵌套更新以防止无限循环。

我做了一些调试，如果我从下面代码的输入中删除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));```

【问题讨论】：

您是否尝试过使用connect(mapStateToProps)(withCookies(LoginForm))？
@FernandoMontoya 现在尝试了，同样的错误...
我的猜测是，因为你的组件连接到 cookie HoC，然后你在 render 方法中调用 cookies.set，它每次都会更新自己，创建一个无限循环。请尝试将cookies.set 移至componentDidMount
@FernandoMontoya 这解决了我的问题，谢谢！ :) 你可以发布答案，以便我标记为正确吗？

标签： reactjs react-redux react-cookie

【解决方案1】：

我的猜测是，因为您的组件连接到 cookie HoC，然后您在 render 方法中调用 cookies.set，所以它每次都会自我更新，从而创建一个无限循环。请尝试将cookies.set 移至componentDidMount。

【讨论】：

从render 方法中删除cookies.set 解决了这个问题！