react和react cookie中出现“超过最大更新深度”错误

Question

我按照这个教程在React with Redux中实现了一个简单的登录表单:https://js lancer . com/blog/2017/04/27/a-simple-log in-flow-with-React-and-Redux/

一切正常，但当我添加cookie时，我收到错误：

警告：在现有状态转换期间（例如在渲染中）无法更新。渲染方法应该是道具和状态的纯粹函数。

以及：

未捕获的不变违规：超过了最大更新深度。当组件重复调用组件内部的setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

我做了一些调试，如果我删除更改={e =

知道为什么下面的代码不起作用吗？

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));``` 




Answer 1

我的猜测是，因为你的组件它连接到cookie HoC，然后你在渲染方法中调用cookies.set，它每次都在更新自己，创建一个无限循环。请尝试将cookies.set移动到组件迪迪蒙特。